I'm trying to create a layout similar to this image, I've tried using this grid but can't make it happen.
<ul class = "container"> <li class = "first"> </li> <li class = "second"> </li> <li class = "third"> </li> <li class = "fourth"> </li> </ul>
.container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .first{ grid-column: span 2; }
P粉0856897072024-04-07 19:09:26
I tried this and it worked
In HTML
In CSS body { margin: 0px; padding: 0px; } .container { height: 500px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; margin: 20px; } .first { border: 5px solid black; grid-column: span 2; grid-row: 1/3; } .second { border: 5px solid black; grid-column: span 2; grid-row: 1/2; } .third { border: 5px solid black; grid-column: span 1; grid-row: 2/3; } .fourth { border: 5px solid black; grid-column: span 1; grid-row: 2/3; }
P粉1634659052024-04-07 17:07:12
html and css have been changed, and ul
and li
are not recommended for layout.
You need to span the grid as per your requirement.
.container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; width: 500px; background:#ccc; height:500px; } .first{ background:red; grid-column: span 2; grid-row: 1/3; } .second{ background:green; grid-column: span 2; grid-row: 1/2; } .third{ background:yellow; grid-column: span 1; grid-row: 2/3; } .fourth{ background:orange; grid-column: span 1; grid-row: 2/3; }