skip to Main Content

I am trying to make a grid layout. There are 7 items in a grid.

The layout I want to display is as following.

1 3 6
2 4 7
  5

The actual layout displayed by the above code is

1
2 3 
  4
  5 6
    7

I tried to add self-align for each grid, but it doesn’t work. How to fix this?

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}

.fruit {
  width: 100%;
  margin-bottom: 10px;
}


/* left column */

.fruit:nth-child(1),
.fruit:nth-child(2) {
  grid-column: 1;
}


/* middle column */

.fruit:nth-child(3),
.fruit:nth-child(4),
.fruit:nth-child(5) {
  grid-column: 2;
}


/* right column */

.fruit:nth-child(6),
.fruit:nth-child(7) {
  grid-column: 3;
}
<div class="fruit-grid">
  <div class="fruit">1</div>
  <div class="fruit">2</div>
  <div class="fruit">3</div>
  <div class="fruit">4</div>
  <div class="fruit">5</div>
  <div class="fruit">6</div>
  <div class="fruit">7</div>
</div>

3

Answers


  1. One easy way would be the usage of order here:

    .fruit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    
    .fruit {
      width: 100%;
      margin-bottom: 10px;
    }
    
    
    /* left column */
    .fruit:nth-child(1),
    .fruit:nth-child(3),
    .fruit:nth-child(6){
      order: 1;
    }
    
    
    /* middle column */
    .fruit:nth-child(2),
    .fruit:nth-child(4),
    .fruit:nth-child(7) {
      order: 2;
    }
    
    
    /* right column */
    .fruit:nth-child(5) {
      order: 3;
    }
    <div class="fruit-grid">
      <div class="fruit">1</div>
      <div class="fruit">2</div>
      <div class="fruit">3</div>
      <div class="fruit">4</div>
      <div class="fruit">5</div>
      <div class="fruit">6</div>
      <div class="fruit">7</div>
    </div>
    Login or Signup to reply.
  2. Hi this is what you need to complete your task. Hope this helps.

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Creates 3 columns */
      grid-auto-rows: minmax(50px, auto); /* Sets the minimum row height */
      gap: 10px; /* Space between grid items */
    }
    
    .grid-item:nth-child(1) { grid-row: 1; grid-column: 1; }
    .grid-item:nth-child(2) { grid-row: 2; grid-column: 1; }
    .grid-item:nth-child(3) { grid-row: 1; grid-column: 2; }
    .grid-item:nth-child(4) { grid-row: 2; grid-column: 2; }
    .grid-item:nth-child(5) { grid-row: 3; grid-column: 1; }
    .grid-item:nth-child(6) { grid-row: 1; grid-column: 3; }
    .grid-item:nth-child(7) { grid-row: 2; grid-column: 3; }
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
    </div>
    Login or Signup to reply.
  3. The solution provided are a bit verbose. You don’t need that much code to achieve what you want

    .fruit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: column;
      text-align: center;
      gap: 10px;
    }
    
    .fruit:nth-child(6) {
      grid-column: 1/-1;
      grid-row: 3;
    }
    
    .fruit {
      width: 100%;
      margin-bottom: 10px;
    }
    <div class="fruit-grid">
      <div class="fruit">1</div>
      <div class="fruit">2</div>
      <div class="fruit">3</div>
      <div class="fruit">4</div>
      <div class="fruit">5</div>
      <div class="fruit">6</div>
      <div class="fruit">7</div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search