CODEWITHSUNDEEP
css-grid
Noamway
Noamway

Reputation: 195

How do I create css grid like this?

This is an example of what I like to achieve: GRID EXAMPLE

I didn't success to create it with CSS GRID so I tried to use masonry framework: https://codepen.io/noamall/pen/ExPVYJj

<h1>Masonry - fluid columnWidth</h1>

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width3" style="height:400px;"></div>
  <div class="grid-item grid-item--width2" style="height:200px;"></div>
  <div class="grid-item grid-item--width2" style="height:200px;"></div>

  <div class="grid-item grid-item--width2" style="height:200px;"></div>
  <div class="grid-item grid-item--width2" style="height:200px;"></div>
  <div class="grid-item grid-item--width3" style="height:400px;"></div>
</div>

Also without success.

Thanks.

Upvotes: 0

Views: 59

Answers (1)

Yousaf
Yousaf

Reputation: 29282

create a 6 x 3 grid and use grid-row and grid-column properties to make some of the grid items span to 2 rows and 2 columns.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 100px);
  grid-gap: 10px;
}

.grid-item {
  background-color: #fc3;
  height: 100%;
  width: 100%;
}

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

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

.grid-item:nth-child(7) {
  grid-row: 5 / span 2;
  grid-column: 1 / span 2;
}
<div class="grid">
  <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 class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Edit:

If you want this grid layout to work with any number of images, you can use multiple 6 x 3 grids and use :nth-child(even) selector to target even .grid elements and change which .grid-item spans 2 rows and 2 columns in those .grid elements.

In the following example, i have used 3 .grid elements each containing 9 .grid-items

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin-bottom: 10px;
}

.grid-item {
  background-color: #fc3;
  height: 100%;
  width: 100%;
}

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

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

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

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

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

.grid:nth-child(even) .grid-item:nth-child(7) {
  grid-row: 5 / span 2;
  grid-column: 2 / span 2;
}
<div class="container">
  <div class="grid">
    <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 class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  <div class="grid">
    <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 class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  <div class="grid">
    <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 class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</div>

Upvotes: 1

Related Questions