How to create this specfic design using grid-CodePudding

I'm trying to create a layout like on this image, i have tried with this grid and I couldn't achieve.

<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;
}

CodePudding user response：

Both html and css is changed, for layout it is not recommended to use ul and li. You need to span through the grid based on 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;
}

<div class = "container">
     <div class = "first"> </div>
     <div class = "second"> </div>
     <div class = "third"> </div>
     <div class = "fourth"> </div>
</div>

CodePudding user response：

i try this and its work

In HTML

<body>
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </body>

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;
}