Html - How to set width when using grid view by css?

JohnOcean
January 12, 2024
137 views
3 votes
3 Answers

.flex-container {
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*define the number of column*/
  grid-auto-flow: dense; /* this is important to fill all the space*/
  grid-gap: 20px;
  padding: 10px;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.item:nth-child(4n + 3) {
  grid-column: 2;
}
.item:nth-of-type(even) {
  width: 150px;
}
.item:nth-of-type(odd) {
  width: calc(100% - 150px);
}

<div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
      </div>

I’d created snake grid of the listing. In that, I added even items width and odd items width different.

But as you can see the gap between and at tha end. I want to fill that part.

Means that if in 100% of full width, let’s take odd(30%) & even(70%). So gap should not appear between it.

But I’m not able to find anywhere a perfect solution of it. So here I’d added a full code of it. Please have a look and suggest a solution. Click Here

<div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
      </div>

.flex-container {
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*define the number of column*/
  grid-auto-flow: dense; /* this is important to fill all the space*/
  grid-gap: 20px;
  padding: 10px;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.item:nth-child(4n + 3) {
  grid-column: 2;
}
.item:nth-of-type(even) {
  width: 150px;
}
.item:nth-of-type(odd) {
  width: calc(100% - 150px);
}

Thank you.

Answers

You can do it like below:

.grid-container {
  background: orange;
  display: grid;
  grid-auto-flow: dense;
  gap: 20px;
  padding: 10px;
}

.item:nth-child(4n + 1) {
  grid-column: span 2; /* 2 columns for item 1*/
}

.item:nth-child(4n + 3) {
  grid-column: 2/span 2; /* 2 columns + 2nd column for item 3*/
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

Also like below for more control of the size:

.grid-container {
  background: orange;
  display: grid;
  grid-auto-flow: dense;
  gap: 20px;
  padding: 10px;
}

.item {
  grid-column-end: span 3; /* 30% */
}

.item:nth-child(4n + 1),
.item:nth-child(4n + 3){
  grid-column-end: span 7; /* 70% */
}

.item:nth-child(4n + 3) {
  grid-column-start: 4; /* 3 + 1 */
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

You can remove a few lines. Use a 3-column grid with uneven columns: 3fr 4fr 3fr. Otherwise you get no clean 30% and 70% split.
Then use nth-child(4n + 1) and nth-child(4n + 4) and add span 2 to achieve what you want:

.flex-container {
  background: orange;
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  grid-gap: 20px;
  padding: 10px;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

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

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

Reduced the code and expected behavior.

.flex-container{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-columns: 1fr;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  flex-direction:column;
  grid-column: span 1 / span 1;
}
.item:nth-child(4n + 1),
.item:nth-child(4n + 4) {
  grid-column: span 2;
}

<div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
      </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to set width when using grid view by css?

Answers