Ways to switch up grid layout for varying amounts of items

Question

Ways to switch up grid layout for varying amounts of items

I am interested in creating a grid layout with a repeating pattern. Specifically, I want three items per row.

The first row should consist of one item spanning 2 columns and 2 rows, followed by two items each spanning 1 column and 1 row.

For the second row, the sequence would be reversed: two items span 1 column and 1 row, while the third item spans 2 columns and 2 rows.

I have included an image below that illustrates what I have in mind. I wish to achieve this layout for an infinite number of rows and items.

https://i.sstatic.net/JzPq8.png

css css-grid

Answer 1

Answer №1

If you want to achieve this, follow the steps below:

.container {
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 columns */
  grid-auto-flow:dense; /* ensure all areas are filled */
  grid-auto-rows:50px; /* height of one row */
  grid-gap:5px;
}
.container * {
  background:red;
}
/* the pattern repeat each 6 elements */
.container :nth-child(6n + 1),
.container :nth-child(6n + 6){
  grid-area:span 2/span 2; /* 1 and 6 take 2 rows and 2 columns */
}

.container :nth-child(6n + 5){
  grid-column:1; /* 5 at first column */
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

If you want to achieve this, follow the steps below:

.container {
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 columns */
  grid-auto-flow:dense; /* ensure all areas are filled */
  grid-auto-rows:50px; /* height of one row */
  grid-gap:5px;
}
.container * {
  background:red;
}
/* the pattern repeat each 6 elements */
.container :nth-child(6n + 1),
.container :nth-child(6n + 6){
  grid-area:span 2/span 2; /* 1 and 6 take 2 rows and 2 columns */
}

.container :nth-child(6n + 5){
  grid-column:1; /* 5 at first column */
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Ways to switch up grid layout for varying amounts of items

Answer №1

Similar questions

Adjust the hyperlink color of <a> to change when hovering over <tr>

What is the process for setting dynamic variables as CSS content within Vue.js?

We have come across a project on CodePen that utilizes Three.js, and we are looking to customize its color scheme

Guide on incorporating `Animate.css` into an Angular application

Hover effects using CSS3 transitions for the content before

the sizing issue with three div elements

Animation of drawing lines in SVG in reverse

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

The Bootstrap 5 class "col-md-4" seems to be malfunctioning

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Getting tags with text containing specific substring by utilizing CSS selectors

The alignment of flexNav.js submenus is not consistent

Button that floats on the left or right side within a div container

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Tips for Creating Sand Text Effects in CSS (Using Text-Shadow)

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

Employing CSS animations to elevate div elements

Ensure the div element remains fixed at the top of the page

The inline display is malfunctioning