a grid with five columns
col_space are equal and flexible and they are just for space
col_1 and col_2 are content columns and fixed size
question - can I have the same funcionality without col_space at all ?
just like this:
<div class='wrap'>
<div class='col_1'>lorem</div>
<div class='col_2'>ipsum</div>
</div>
.wrap{
display:grid;
grid-template-columns:1fr 99px 1fr 54px 1fr;
height:50vh;
}
.col_space{background:lightblue;}
.col_1, .col_2{background:orange;}
<div class='wrap'>
<div class='col_space'></div>
<div class='col_1'>lorem</div>
<div class='col_space'></div>
<div class='col_2'>ipsum</div>
<div class='col_space'></div>
</div>
space-evenly on justify—content will do this,
.wrap{
display:grid;
grid-template-columns:99px 54px;
height:50vh;
justify-content: space-evenly;
}
.wrap{background:lightblue;}
.col_1, .col_2{background:orange;}
<div class='wrap'>
<div class='col_1'>lorem</div>
<div class='col_1'>ipsum</div>
</div>
Related
I have a grid with 5 columns and 4 rows.
I'd like to have height of each cell the same in each row.
Another words each row height should be equal to highest cell in that row.
Unfortunately I can get only total cells the same height.
The only approach I've got the result was flex and set in DIV style="order:{order number}"
but that aproach is not good because its impossible to make responsive web design and complicate to render page with php.
So, I can't change order of HTML DIV elements due to responsive web design.
Any help in CSS would be appreciated.
Thank you
body {
background-color: #ededed;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #c2b9b4;
text-align: center;
}
.grid-container {
margin:auto;
width:990px;
display: grid;
grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
grid-template-rows: 1fr;
grid-row-gap: 0px;
grid-column-gap: 5px;
}
.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}
.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
border-bottom:1px #d6d6d5 solid;
height:auto;
}
.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}
<div class="grid-container">
<div class="object top_object">
<div style="background:#e5f5e5;" class="potencia">Display</div>
<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
<div class="potencia">Le pile/batterie sono incluse?</div>
<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>
<div class="object object1">
<div class="potencia">LCD</div>
<div style="background:#f5f4f4;"class="potencia">1200</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1920_x_1080</div>
</div>
<div class="object object2">
<div class="potencia">LCD</div>
<div style="background:#f5f4f4;"class="potencia">2800</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>
<div class="object object3">
<div class="potencia">LED, LCD</div>
<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1080p Full HD</div>
</div>
<div class="object object4">
<div class="potencia">LED</div>
<div style="background:#f5f4f4;"class="potencia">2800</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1920_x_1080</div>
</div>
</div>
I dont quite understand your problem. If you just want that the last cell is the rest of the available height you could use flex.
Or do you want that every cell has the same height as the one with the text I'm the highest cell in this row, but left and right cells are smaller. in it?
body {
background-color: #ededed;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #c2b9b4;
text-align: center;
}
.grid-container {
margin:auto;
width:990px;
height:320px;
display: grid;
grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
grid-template-rows: 1fr;
grid-row-gap: 0px;
grid-column-gap: 5px;
}
.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}
.potencia {
height: 25%;
}
.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
border-bottom:1px #d6d6d5 solid;
}
.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}
<div class="grid-container">
<div class="object top_object">
<div style="background:#e5f5e5;" class="potencia">Display</div>
<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
<div class="potencia">Le pile/batterie sono incluse?</div>
<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>
<div class="object object1">
<div class="potencia">LCD</div>
<div style="background:#f5f4f4;"class="potencia">1200</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1920_x_1080</div>
</div>
<div class="object object2">
<div class="potencia">LCD</div>
<div style="background:#f5f4f4;"class="potencia">2800</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>
<div class="object object3">
<div class="potencia">LED, LCD</div>
<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1080p Full HD</div>
</div>
<div class="object object4">
<div class="potencia">LED</div>
<div style="background:#f5f4f4;"class="potencia">2800</div>
<div style="background:#f5f4f4;"class="potencia"><span></span></div>
<div class="potencia">1920_x_1080</div>
</div>
</div>
Suppose we have a responsive grid container with indefinite number of child cells. Cells' widths and heights vary. Using only CSS (probably CSS Grid), how can we create such grid, that number of columns / rows and the width / height of each column / row is determined dynamically based on the container's size (without overflowing it) and cells' sizes in one of the following two ways:
Width / height for each column / row is determined based on the widest / tallest cell in that column / row,
Width / height for all the columns / rows is determined based on the widest / tallest cell in the grid?
When applied to column width, these two cases loosely correspond to, respectively, automatic and fixed layout algorithms for tables. Except we don't know the number of columns and rows; it needs to be somehow determined automatically.
The following examples demonstrate these two cases applied to column width. For each case there are two possible flow directions: row or column. Note that in the examples we had to set the number of columns and their sizes specifically. I would like those to be determined automatically.
Please try to replicate these examples in your answer without setting the exact number of columns, rows and any widths or heights.
* {
box-sizing: border-box;
}
.container {
display: grid;
flex-wrap: wrap;
grid-template-rows: repeat(3, auto);
justify-content: space-between;
border: 3px solid teal;
font-size: 20px;
}
.flex {
grid-template-columns: repeat(3, auto);
width: min-content;
}
.fixed {
grid-template-columns: repeat(3, 33.33%);
width: 28em;
}
.column {
grid-auto-flow: column;
}
.cell {
padding: 1em;
background: pink;
border: 1px dashed teal;
white-space: nowrap;
}
h3:not(:first-of-type) {
margin-top: 3em;
}
<h3>Flexible column width. Flow in rows</h3>
<div class="container flex row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Buckle my shoe</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Knock at the door</div>
<div class="cell">Five</div>
<div class="cell">Six</div>
</div>
<h3>Flexible column width. Flow in columns</h3>
<div class="container flex column">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Buckle my shoe</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Knock at the door</div>
<div class="cell">Five</div>
<div class="cell">Six</div>
</div>
<h3>Fixed column width. Flow in rows</h3>
<div class="container fixed row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Buckle my shoe</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Knock at the door</div>
<div class="cell">Five</div>
<div class="cell">Six</div>
</div>
<h3>Fixed column width. Flow in columns</h3>
<div class="container fixed column">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Buckle my shoe</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Knock at the door</div>
<div class="cell">Five</div>
<div class="cell">Six</div>
</div>
I had the same problem, using column, and this was fixed by adding grid-template-columns: repeat(auto-fit, minmax(baseValue,maxValue)); to the parent element
Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works?
Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works?
NO
There is no such property.
CSS Grid rows and columns are entirely virtual and only indicate the start and end point of their respective areas for the browser's layout engine.
Another option is to think about the background colors of both your grid and your grid cells. If you can color the background of the grid and apply a neutral white to your elements, the grid background will bleed through the grid-gap. This effectively gets you grid rules.
Example:
.grid-container {
background-color: #111; /* color of the line between cells */
display: grid;
grid-gap: 1px; /* size of the line between cells */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(min-content, max-content);
padding: 1px; /* size of the line around the grid */
}
.grid-item {
background-color: #fff; /* cells need a bg color for this to work */
min-height: 100px;
}
<section 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 class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</section>
Downside is that you still need to do a lot of manual padding adjustments around the grid depending on your content and, if you have a grid with weird amounts of content, the background will bleed through.
But, for simple grids, this works more often than I think it should.
As #Paulie_D said, no there isn't. You would have to do something as hideous as this to get something even close it it - you can't even use grid-gap if you do this:
#grid{
display: inline-grid;
grid-template-rows: auto 2px auto 2px auto;
grid-template-columns: auto 2px auto 2px auto;
}
.item{
width: 5rem;
height: 5rem;
background: red;
}
.rule{
background:black;
}
<div id="grid">
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
</div>
Another option you could do would be to target a specific div and designate that as your horizontal rule column by having it span multiple columns.
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.wrapper>div {
background-color: #eee;
padding: 1em;
}
.fullRow {
grid-column: 1/ 4;
}
<div class="wrapper">
<div>
first column
</div>
<div>
second column
</div>
<div>
third column
</div>
<div class="fullRow">
<hr>
</div>
<div>
first column
</div>
<div>
second column
</div>
<div>
third column
</div>
<div class="fullRow">
<hr>
</div>
</div>
No pure grid-* way to do it but you can put borders on the child divs, just don't use grid-column-gap (padding instead). Showing some nth-child cleanups for inside-only rules, and some custom per-column text alignment.
.container {
display: grid;
grid-template-columns:
.15fr
.20fr
.05fr
.15fr
.08fr
.1fr
.20fr;
/*grid-column-gap: 0*/
}
.container>div {
border-top: 1px solid gainsboro;
border-left: 1px solid gainsboro;
padding: .2rem .4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* get rid of leading border (optional) */
.container>div:nth-child(7n+1) {
border-left: unset;
}
/* get rid of top -most border (optional) */
.container>div:nth-child(-n+7) {
border-top: unset;
/* this is could also be the "header" row, bolding etc. goes here*/
}
/* custom per-column text alignments */
.container>div:nth-child(7n+3),
.container>div:nth-child(7n+5) {
text-align: end;
}
<div class="container">
<div>2019-11-14</div>
<div>Nov 10 - 13, 2019</div>
<div>4</div>
<div>Sun - Wed</div>
<div>669</div>
<div>Likely</div>
<div>North Carolina</div>
<div>2019-11-14</div>
<div>Nov 10 - 13, 2019</div>
<div>4</div>
<div>Sun - Wed</div>
<div>627</div>
<div>Likely</div>
<div>Nevada</div>
<div>2019-11-14</div>
<div>Nov 1 - 7, 2019</div>
<div>7</div>
<div>Fri - Thu</div>
<div>347</div>
<div>Adults</div>
<div>North Carolina</div>
<div>2019-11-13</div>
<div>Nov 1 - 13, 2019</div>
<div>13</div>
<div>Fri - Wed</div>
<div>695</div>
<div>Likely</div>
<div>California</div>
</div>
What about just using ::after selector and absolute position
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
column-gap: 41px;
}
.column {
position: relative;
background: pink;
}
.column::after {
display: block;
content: "";
background: red;
width: 1px;
height: 100%;
position: absolute;
top: 0px;
right: -21px;
}
.column:last-child::after {
display: none;
}
<div class="grid-container">
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
</div>
By using "hr" tag you can add horizontal line, but to add vertical line you have to give border using CSS.
I am wanting to create a grid layout with responsive squares.
I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width.
Also having trouble setting a gutter between each square.
Would I be better off using flexbox?
Currently my HTML looks like this but will be dynamic so more squares may be added. And of course it needs to be responsive so will ideally use a media query to collapse it to one column.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Using css grid, this is as far as I got
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
I was able to get a bit further with flexbox and able to use space-between to align squares with a nice gutter but was still struggling to get the height to match the width of each square.
I wasn't able to find any examples of this being done with either flexbox or grid but any examples would be appreciated as well.
Thanks
The padding-bottom trick is the most used to accomplish that.
You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.
Edit: Note, there's an update made to the specs., that now should give consistent result when used on flex/grid items. Be aware though, the issue still occurs on older versions.
Note, if you will add content to the content element, it need to be position absolute to keep the square's aspect ratio.
Fiddle demo - Flexbox
Edit 2: In a comment I were asked how to have a centered text, so I added that in below snippet.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
display: flex; /* added for centered text */
justify-content: center; /* added for centered text */
align-items: center; /* added for centered text */
}
<div class="square-container">
<div class="square">
<div class="content">
<span>Some centered text</span>
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
CSS Grid version
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-gap: 10px;
}
.square {
position: relative;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Try using viewport percentage units.
jsFiddle
.square-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
grid-template-rows: 30vw;
grid-gap: 2.5vw;
padding: 2.5vw;
background-color: gray;
}
.square {
background-color: lightgreen;
}
body {
margin: 0; /* remove default margins */
}
<div class="square-container">
<div class="square">
<div class="content"></div>
</div>
<div class="square">
<div class="content spread"></div>
</div>
<div class="square">
<div class="content column"></div>
</div>
</div>
From the spec:
5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing
block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
You can use the fact that padding is calculated based on the width and set padding-top: 100% directly to the square grid items (the grid items would be square now).
2019 update
Note that for flex items as well as grid items earlier this doesn't used to work - see the post linked in the comments to this answer:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
Now that there is a consensus between browsers (newer versions) to have the same behaviour for padding for flex items and grid items, you can use this solution.
See demo below:
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-gap: 10px;
}
.square {
background: cadetblue;
padding-top: 100%; /* padding trick directly on the grid item */
box-sizing: border-box;
position: relative;
}
.square .content { /* absolutely positioned */
position: absolute;
top: 0;
right:0;
left: 0;
bottom: 0;
}
<div class="square-container">
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content column">some content here and there is a lot of text here</div>
</div>
<div class="square">
<div class="content spread">text</div>
</div>
<div class="square">
<div class="content column">some text here</div>
</div>
</div>
You can achieve this in all modern browsers using CSS aspect-ratio property.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.container div {
aspect-ratio: 1 / 1;
/* Styles below just for demo */
background-color: orange;
color: white;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
For days I was astonished that in 2020 there is no simple solution for this. I was convinced that with CSS grid this is gonna be a piece of cake... Flexbox solution provided by Ason is the only one that works across browsers. On Stack I found one more solution with CSS grid that uses padding-bottom: 100% but it doesn't work in Firefox (you get a lot of white space beneath the footer).
This is my take on the problem, I think it is the simplest solution of all that I have encountered these days.
CSS Grid solution on Codepen:
https://codepen.io/abudimir/pen/ExKqyGp
<div class="square-container">
This question already has answers here:
Zebra striping a flexbox table with wrapping items
(3 answers)
Closed 8 months ago.
When using tables, it is easy to alternate colors in table rows using the nth child selectors (https://stackoverflow.com/a/3084318/1385857). Is there a comparable way to do so when using the flexbox layout. I have the following (from https://philipwalton.github.io/solved-by-flexbox/demos/grids/):
<div class="Grid">
<div class="Grid-cell"></div>
[more divs]
<div class="Grid-cell"></div>
</div>
.Grid
{
display: flex;
flex-wrap: wrap;
}
.Grid-cell
{
flex: 1;
}
Is it possible to alternate row colors in this scenario. To clarify, there are no real rows, only the virtual rows created by flex box due to wrapping.
A bit late but it might help others. Here is a working solution I've just come up with.
It uses the linear-gradient CSS function.
The only downside is that it requires your cells to have a fixed height.
/* $cell_height: 80px */
.grid {
display: flex;
flex-flow: row wrap;
/* this is where the magic is */
background-image: linear-gradient(180deg, red 50%, green 50%);
background-repeat: repeat;
background-size: 100px 160px; /* width is not relevant, but height must be 2*$cell_height */
}
.grid-cell {
height: 80px; /* $cell_height */
/* this is just to have a responsive display for the demo */
width: 25%;
min-width: 250px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="grid">
<div class="grid-cell">1</div>
<div class="grid-cell">2</div>
<div class="grid-cell">3</div>
<div class="grid-cell">4</div>
<div class="grid-cell">5</div>
<div class="grid-cell">6</div>
<div class="grid-cell">7</div>
<div class="grid-cell">8</div>
<div class="grid-cell">9</div>
<div class="grid-cell">10</div>
<div class="grid-cell">11</div>
<div class="grid-cell">12</div>
<div class="grid-cell">13</div>
<div class="grid-cell">14</div>
</div>
This is a super old post, but I guess still relevant as this issue just came up for me where I had to do a static layout that's responsive going from two columns to four, so trying to organize the columns into rows like an actual table didn't make sense. The above answer with the repeating gradient is creative and works great if you can have a fixed height on your items, but the down-voted nth-child selector answer is better with flex-box if your items need to wrap and have flexible heights. I think that answer just needed to be tweaked a bit for the situation.
<div class="list-cols">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
<div>Twelve</div>
<div>Thirteen</div>
<div> </div>
<div> </div>
<div> </div>
</div>
Then adjust your selector for how many columns you have. In this case I've got 4 columns, so the nth-of-type formula selects 1-4, 9-12, etc. In your markup, the number of children needs to be divisible by 4 to make a complete last row, so fill it out with empty divs if necessary.
.list-cols {
display: flex;
flex-wrap: wrap;
}
.list-cols > div {
padding: 8px 12px;
box-sizing: border-box;
flex-basis: 25%;
width: 25%;
}
.list-cols > div:nth-of-type(8n+1),
.list-cols > div:nth-of-type(8n+2),
.list-cols > div:nth-of-type(8n+3),
.list-cols > div:nth-of-type(8n+4) {
background: #f2f2f2;
}
You can use the same technic with nth-child (2n+1, even, odd), or whatever you want.
The display of the element doesn't interfere with that here.
.Grid {
display: flex;
flex-wrap: wrap;
}
.Grid-row {
flex: 1;
}
.Grid-cell:nth-child(2n+1) {
background: pink;
}
<div class="Grid">
<div class="Grid-row">
<div class="Grid-cell">Grid-cell 1</div>
<div class="Grid-cell">Grid-cell 2</div>
<div class="Grid-cell">Grid-cell 3</div>
<div class="Grid-cell">Grid-cell 4</div>
<div class="Grid-cell">Grid-cell 5</div>
<div class="Grid-cell">Grid-cell 6</div>
<div class="Grid-cell">Grid-cell 7</div>
</div>
<div class="Grid-row">
<div class="Grid-cell">Grid-cell 1</div>
<div class="Grid-cell">Grid-cell 2</div>
<div class="Grid-cell">Grid-cell 3</div>
<div class="Grid-cell">Grid-cell 4</div>
<div class="Grid-cell">Grid-cell 5</div>
<div class="Grid-cell">Grid-cell 6</div>
<div class="Grid-cell">Grid-cell 7</div>
</div>
</div>