Creating this specific design using a grid: a step-by-step guide
P粉662361740
P粉662361740 2024-04-06 20:29:08
0
2
838

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粉662361740
P粉662361740

reply all(2)
P粉085689707

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粉163465905

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;
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template