CODEWITHSUNDEEP
htmlcssflexboxcss-grid
user3142
user3142

Reputation: 879

CSS grid layout with different width for nth-child

I would like to have a grid layout with the first four elements with the width equal to 300px while keeping the other elements a different width value (200px to be exactly):

Basically, I'm trying to solve this problem by declaring grid-template-columns two times, as in the code below:

  grid-template-columns: repeat(auto-fit, 200px);

  grid-template-columns:nth-child(-n+4){
       grid-template-columns: repeat(4, 300px);

But it's not working.

Is grid layout the right approach to do this? Can I achieve the same results with Flexbox and grid layout maybe?

Here is the CodePen with my progress so far https://codepen.io/williamjamir/pen/GQYqrK

.container {
  width: 100%;
  margin: auto;
  background-color: #ddd;
  display: grid;
  justify-content: center;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, 100px);
}
@media screen and (min-width: 400px) {
  .container {
    grid-template-columns: repeat(auto-fit, 200px);
  }
  .container .container:nth-child(-n + 4) {
    grid-template-columns: repeat(4, 300px);
  }
}
.container .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}
.container .item--1 {
  background-color: orangered;
}
.container .item--2 {
  background-color: yellowgreen;
}
.container .item--3 {
  background-color: blueviolet;
}
.container .item--4 {
  background-color: palevioletred;
}
.container .item--5 {
  background-color: royalblue;
}
.container .item--6 {
  background-color: goldenrod;
}
.container .item--7 {
  background-color: crimson;
}
.container .item--8 {
  background-color: darkslategray;
}
<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
  <div class="item item--7">G</div>
  <div class="item item--8">H</div>
</div>

Upvotes: 6

Views: 19570

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372059

Set the repeat / auto-fit function to a small width that can serve as a common denominator.

In this case, 100px will do.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
}

Then, set the first four elements to span three columns.

Set the following elements to span two columns.

.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5)  { grid-column: span 2; }

revised codepen (CSS compiled)

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 100px);
   justify-content: center;
   grid-gap: 30px;
   background-color: #ddd;
}

.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5) { grid-column: span 2; }

.item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}
.container .item--1 { background-color: orangered;     }
.container .item--2 { background-color: yellowgreen;   }
.container .item--3 { background-color: blueviolet;    }
.container .item--4 { background-color: palevioletred; }
.container .item--5 { background-color: royalblue;     }
.container .item--6 { background-color: goldenrod;     }
.container .item--7 { background-color: crimson;       }
.container .item--8 { background-color: darkslategray; }
<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
  <div class="item item--7">G</div>
  <div class="item item--8">H</div>
</div>

Upvotes: 8

dippas
dippas

Reputation: 60573

Not sure what layout are you looking for, but seems to be that you need to use grid-column in .item and spanning the item through the columns, the 2 in the code is for demo, you can choose the number of columns to span as you wish. 

.container {
  width: 100%;
  margin: auto;
  background-color: #ddd;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.container .item:nth-child(-n+4) {
  grid-column: span 2
}

.container .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}

.container .item--1 {
  background-color: orangered;
}

.container .item--2 {
  background-color: yellowgreen;
}

.container .item--3 {
  background-color: blueviolet;
}

.container .item--4 {
  background-color: palevioletred;
}

.container .item--5 {
  background-color: royalblue;
}

.container .item--6 {
  background-color: goldenrod;
}

.container .item--7 {
  background-color: crimson;
}

.container .item--8 {
  background-color: darkslategray;
}
<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
  <div class="item item--7">G</div>
  <div class="item item--8">H</div>
</div>

Upvotes: 1

Related Questions