I am trying to create a grid layout for a list of images using CSS. Here is the HTML code I have:
<ul id='feat-products'>
<li><img id='feat-product-1'></li>
<li><img id='feat-product-2'></li>
<li><img id='feat-product-3'></li>
<li><img id='feat-product-banner'></li>
</ul>
Here is the CSS I am using:
#feat-products ul {
width: 1000px;
height: 400px;
}
#feat-products li {
display: inline-block;
border: solid 1px;
}
#feat-products li:nth-child(1) {
width: 500px;
height: 400px;
}
#feat-products li:nth-child(2) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(3) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(4) {
width: 500px;
height: 200px;
}
However, the layout I am getting does not look as expected. I have tried using negative margins but I believe there might be a better way to achieve the desired layout. Any help would be appreciated!
Thank you!
DB