CSS Grid Margin Top for entire columns

Question

Is it possible to shift all 2nd/even grid colums as a whole like in the image using CSS grid?

My current css code situation is very simple, it looks like this:

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;

I am trying to achive something that looks like the following image:

score 1 · Answer 1 · answered Sep 03 '22 at 17:31

1

This might do the trick.

.grid-container {
  width: min-content;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;  
}

.grid-container > div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.grid-container div:nth-child(2n) {
  position: relative;
  top: 15px;
}

<div class='grid-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>

answered Sep 03 '22 at 17:31

Aleksandar

460
3
13

Good job, looks great. Is this the way to go? No standard functionallity of CSS grid which can accomplish something like that? – mleister Sep 03 '22 at 17:44
1

Not yet, Unfortunately. – Aleksandar Sep 03 '22 at 17:46

score 1 · Accepted Answer · answered Sep 03 '22 at 17:59

You can use the :nth-child() pseudo class to achieve this. This is how I approached it:

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

.container{
  max-width: 900px;
  margin: 0 auto;
  height: auto;
}
.cards{
  display: grid;
  place-items: center;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}

.card{
  width: 200px;
  height: 250px;
  border: 3px solid black;
}

.card:nth-child(2n-2){
  position: relative;
  top: 100px;
}
/* or use margin */
/*
.card:nth-child(2n-2){
  margin-top: 100px;
}
*/

Here is the codepen link: https://codepen.io/glenhug/pen/QWrWXJY Also this is post had a nice explanation: How to target a specific column or row in CSS Grid Layout?

score 0 · Answer 3 · answered Sep 03 '22 at 23:19

Not with CSS grid but combining inline-block, float and shape-outside you can do it and it will be responsive and works with any element.

Find all the details in my article: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

Here is a demo:

.main {
  display:flex;
  --s: 100px; /* size */
  --r: 1; /* ratio */
  --mv: 4px; /* margin */
  
  
  --vc: calc(var(--s) * var(--r) * .5); 
  --mh: calc(var(--mv) + var(--s)/2); 
  --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);
}

.container {
  font-size: 0; /*disable white space between inline block element */
}

.container div {
  width: var(--s);
  margin: var(--mv) var(--mh);
  height: calc(var(--s)*var(--r)); 
  display: inline-block;
  font-size: initial;
  background: red;
  margin-bottom: calc(var(--mv) - var(--vc)); 
}
.container div:nth-child(odd) {
  background: green;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--mh));
  float: left;
  height: 135%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 2px),      
                   #000  0 var(--f));
}

<div class="main">
  <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></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>

CSS Grid Margin Top for entire columns

3 Answers3