Question 189704 in CSS Question posted in
Some basic documentation can be found here.

How to create a css grid without the same amount of items in columns

I’m trying to build this schema into css grid but can’t find how to achieve it. I’l not sure if it’s possible in 100% css.

Layout image

If someone could help me, i would be very happy…
Thanks for help 🙂

Tags:

2

Answers


  1. 0

    You could make a 3 column grid and nest a flex container or another grid within each column.

    .grid {
  width: fit-content;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.box {
  height: 100px; /* for presentation */
  width: 100px; /* for presentation */
  background-color: #DDD; /* for presentation */
  border: 1px solid #999; /* for presentation */
}
    <div class="grid">
  <div class="flex">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="flex">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="flex">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

    But it’s even simpler (and less styling) if you do it using flexbox only:

    .flex {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.flex-column {
  flex-direction: column;
}

.box {
  height: 100px; /* for presentation */
  width: 100px; /* for presentation */
  background-color: #DDD; /* for presentation */
  border: 1px solid #999; /* for presentation */
}
    <div class="flex flex-row">
  <div class="flex flex-column">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="flex flex-column">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="flex flex-column">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    html:

    <div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

    css:

    .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.grid-item {
  background-color: #ddd;
  padding: 80px;
  position: relative;
}

.grid-item:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.grid-item:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.grid-item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}


.grid-item:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.grid-item:nth-child(5) {
  grid-column: 1;
  grid-row: 3;
}

.grid-item:nth-child(6) {
  grid-column: 2;
  grid-row: 3;
}

.grid-item:nth-child(7) {
  grid-column: 3;
  grid-row: 3;
}
.grid-item:nth-child(2), .grid-item:nth-child(4), .grid-item:nth-child(5), .grid-item:nth-child(7) {
  margin-top: -80px;
  height: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search