This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
How to make css grid rows height expanding to take the maximum depending on their content?
So this would transform:
Into:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
outline: 2px dashed red;
}
.panel-grid {
background-color: #f0f0f0;
outline: 1px solid blue;
display: grid;
}
.row {
background-color: #5879c5;
text-align: center;
font-weight: bold;
}
.row2 {
background-color: #c5b07f;
text-align: center;
font-weight: bold;
}
.row3 {
background-color: #e0ffef;
text-align: center;
font-weight: bold;
}
<div class="grid">
<div class="panel-grid">
<div class="row"><div>1</div><div>1</div><div>1</div></div>
<div class="row2"><div>2</div></div>
<div class="row3"><div>3</div></div>
</div>
<div class="panel-grid">
<div class="row"><div>1</div></div>
<div class="row2"><div>2</div><div>2</div><div>2</div></div>
<div class="row3"><div>3</div></div>
</div>
<div class="panel-grid">
<div class="row"><div>1</div></div>
<div class="row2"><div>2</div></div>
<div class="row3"><div>3</div></div>
</div>
</div>
I don't think this will be possible until browsers support display: contents or display: subgrid.
In the meanwhile, I think the closest you can get (without altering the HTML) is equal height rows across containers. The heights are set by the tallest item in each row.
Add this to your code:
.panel-grid {
display: grid;
grid-auto-rows: 1fr; /* new */
}
This overrides the grid-auto-rows: auto default.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
outline: 2px dashed red;
}
.panel-grid {
background-color: #f0f0f0;
outline: 1px solid blue;
display: grid;
grid-auto-rows: 1fr; /* new */
}
.row {
background-color: #5879c5;
text-align: center;
font-weight: bold;
}
.row2 {
background-color: #c5b07f;
text-align: center;
font-weight: bold;
}
.row3 {
background-color: #e0ffef;
text-align: center;
font-weight: bold;
}
<div class="grid">
<div class="panel-grid">
<div class="row">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div class="row2">
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
</div>
<div class="panel-grid">
<div class="row">
<div>1</div>
</div>
<div class="row2">
<div>2</div>
<div>2</div>
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
</div>
<div class="panel-grid">
<div class="row">
<div>1</div>
</div>
<div class="row2">
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
</div>
</div>
If you can change the HTML–putting all items in a single container– then here's a possible option:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto); /* new */
grid-auto-flow: column; /* new */
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
grid-gap: 5px;
outline: 2px dashed red;
}
.row {
background-color: #5879c5;
text-align: center;
font-weight: bold;
}
.row2 {
background-color: #c5b07f;
text-align: center;
font-weight: bold;
}
.row3 {
background-color: #e0ffef;
text-align: center;
font-weight: bold;
}
<div class="grid">
<div class="row">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div class="row2">
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
<div class="row">
<div>1</div>
</div>
<div class="row2">
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
<div class="row">
<div>1</div>
</div>
<div class="row2">
<div>2</div>
</div>
<div class="row3">
<div>3</div>
</div>
</div>
More details:
Positioning content of grid items in primary container (subgrid feature)
Equal height rows in CSS Grid Layout
If you are able to modify your HTML and re-order your rows (as in the demo code below), you should be able to accomplish something similar by using a container with grid-auto-flow:row - like this:
.container {
align-items: stretch;
grid-auto-flow: row;
}
See demo below:
.container {
align-items: stretch;
grid-auto-flow: row;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 9fr);
grid-column-gap: 20px;
outline: 2px dashed red;
}
.panel-grid {
background-color: #f0f0f0;
outline: 1px solid blue;
display: grid;
}
.row {
background-color: #5879c5;
text-align: center;
font-weight: bold;
}
.row2 {
background-color: #c5b07f;
text-align: center;
font-weight: bold;
}
.row3 {
background-color: #e0ffef;
text-align: center;
font-weight: bold;
}
<div class="grid container">
<!-- row 1 -->
<div class="row">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div class="row">
<div>1</div>
</div>
<div class="row">
<div>1</div>
</div>
<!-- row 2 -->
<div class="row2">
<div>2</div>
</div>
<div class="row2">
<div>2</div>
<div>2</div>
<div>2</div>
</div>
<div class="row2">
<div>2</div>
</div>
<!-- row 3 -->
<div class="row3">
<div>3</div>
</div>
<div class="row3">
<div>3</div>
</div>
<div class="row3">
<div>3</div>
</div>
</div>
Related
Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?
This is such a simple thing to achieve using an Html table. How do I do it using display: grid ?
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Instead of using an actual border around grid items, use the background color on the container (for "border" color) and the grid-gap property (for "border" width).
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border: 1px solid black;
grid-gap: 1px;
background-color: black;
}
.wrapper > div {
background-color: white;
padding: 15px;
text-align: center;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You may do like this :
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-top: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Another idea is to rely on gradient to fill gaps like below:
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
grid-gap:1px;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat,
repeating-linear-gradient(to right,transparent 0 50px,#000 0 51px);
border:1px solid;
}
.wrapper > div {
padding: 15px;
text-align: center;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You can also adjust the initial solution to make it more flexible and it will work with any number of items inside a row.
Run the below code on full page and resize the window:
.wrapper {
display: grid;
max-width:800px;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
I found a solution by using the outline property.
.grid {
width: 100%;
height: 700px;
display: grid;
grid-template-columns: repeat(4, 25fr);
grid-template-rows: repeat(4, 25fr);
margin-bottom: 30px;
grid-gap: 1px;
}
.grid-item {
background-color: silver;
outline: 1px solid gray; /* The outline creates the border */
text-align: center;
position: relative;
z-index: 1; /* original z-index */
}
/* If you want to change the color on the hover state */
.grid-item:hover {
outline: 1px solid red;
z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */
}
<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 class="grid-item"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
margin:0 -1px -1px 0;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
margin:0 -1px -1px 0;
This should do the trick.
There is an easy way to do this:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
.grid__item {
border: 1px solid gray;
box-sizing: content-box;
width: 100%;
height: 100%;
}
<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
<div class="grid__item">8</div>
<div class="grid__item">9</div>
<div class="grid__item">10</div>
<div class="grid__item">11</div>
<div class="grid__item">12</div>
</div>
P.s. The main trick here is in box-sizing: content-box. You don't need it if you do not globally override it with another value. But many people uses border-box, in that case, this override solves the problem with the gap.
Something I've used with success is simply adding a box shadow to the grid items, along with a column and row gap. This then allows the columns size to always be exactly as determined in grid-template-columns.
Then simply changing the column and row gap and box shadow size allows for a thicker border.
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-column-gap: 1px;
grid-row-gap: 1px;
}
.wrapper > div {
padding: 15px;
text-align: center;
box-shadow: 0 0 0 1px;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
For anyone who will struggle with an odd number of elements and a specific amount of frames you can use the following approach
<style>
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
border: 1px solid;
grid-gap: 1px;
}
.element {
display: flex;
flex-direction: column;
background-color: azure;
min-height: 10rem;
border: 1px solid;
margin: -1px;
}
</style>
<body>
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</body>
https://codepen.io/sergeytkhojevskiy/pen/XWZOJOL
The win-win code would be to set
grid items: border-bottom & border-right
grid wrapper: border-top & border-left
So it would correct even if top columns not equal to bottom columns
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
If you will fix the number of item per row this solution will fit you,
this example for 3 each row, but you can edit
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
grid-template-areas: '. . .';
}
.grid-item {
order: 0;
flex: 0 1 auto;
text-align: center;
padding: 1rem;
font-size: 12px;
background-color: #e8e8e8;
border-color: #000;
border-style: solid;
border-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
}
/*first 3 items*/
.grid-item:nth-child(-n + 3) {
border-top-width: 1px;
}
/*last item on each row*/
.grid-item:nth-child(3n + 0) {
border-right-width: 1px;
background-color: cadetblue;
}
/*first item on each row*/
.grid-item:first-child,
.grid-item:nth-child(3n + 1) {
border-left-width: 1px;
background-color: red;
}
/*middel item on each row (not used)*/
.grid-item:nth-child(3n - 1) {
// border-left-width: 1px;
background-color: yellow;
}
/*last item (not used)*/
.grid-item:last-child {
// border-left-width: 0;
background-color: green
}
<div class="grid-container">
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
</div>
Is it possible to define a grid with a maximum number of columns, but allow elements to wrap onto new rows when the screen width changes?
I have implemented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.
Here is a CodePen of one method using Flexbox:
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Another method is to use a grid:
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
I want a fairly generic solution to this. Is what I want to achieve possible without JavaScript or media queries?
With CSS grid you can consider the use of max(width, 100%/N) where N is the maximum number of columns. If the width of the container increases, 100%/N will for sure be bigger than width, thus we won't have more than N elements per row.
.grid-container {
--n: 4; /* The maximum number of columns */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}
.grid-item {
background: tomato;
padding: 5px;
height: 50px;
margin: 10px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
<div class="grid-container" style="--n:3">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
With gaps:
.grid-container {
--n: 4; /* The maximum number of columns */
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)), 1fr));
gap: 10px;
margin: 5px;
}
.grid-item {
background: tomato;
padding: 5px;
height: 50px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
<div class="grid-container" style="--n:3">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
With flexbox, you can simply set a max-width to the container since your elements have a fixed width:
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: calc(5*(200px + 20px));
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.
If you want your elements to expand and cover all the width, you can use a trick with min-width like below:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
min-width: 200px;
width: calc(100%/5 - 20px); /* 5 columns */
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
Here also you need to consider the margin. You can easily make this more flexible using CSS variables:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
--m: 10px;
background: tomato;
padding: 5px;
min-width: 200px;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
You can also consider flex-grow if you want your element to always expand (even when there is a wrap), but you may face the issue of the last row that you need to fix with some hacks:
.flex-container {
display: flex;
flex-wrap: wrap;
--m: 10px;
}
.flex-item {
background: tomato;
padding: 5px;
min-width: 200px;
flex-grow: 1;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
.flex-container span {
min-width: 200px;
flex-grow: 1;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
margin: 0 var(--m);
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- 4 empty elements to fix the issue (we can also use a pseudo element) -->
<span></span>
<span></span>
<span></span>
<span></span>
</div>
In the example below, we made the number of columns to be 5 so we will need at least 4 empty elements to fix the issue in case we will have one to 4 elements in the last row.
Of course, this is a drawback, but since you know the number of columns you can easily set those empty elements and you won't need any JavaScript.
To make it more flexible, here is an idea with CSS variables:
.flex-container {
display: flex;
flex-wrap: wrap;
border: 1px solid;
--m: 10px;
--n: 5;
--width: 150px;
}
.flex-item {
background: tomato;
min-width: var(--width);
flex-grow: 1;
width: calc(100%/var(--n) - 2*var(--m));
height: 50px;
margin: var(--m);
box-sizing: border-box;
}
.flex-container span {
display: contents; /* Each span will give us 2 elements */
}
.flex-container span: before,
.flex-container span: after,
.flex-container: before,
.flex-container: after{
content: "";
min-width: var(--width);
flex-grow: 1;
width: calc(100%/var(--n) - 2*var(--m));
margin :0 var(--m);
order: 1; /* We make sure they are at the end */
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="flex-container wrap" style="--n:10">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="flex-container wrap" style="--n:3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
I used display: contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.
If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.
You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS variables (usually that's all you need).
CSS Grid Layout
For instance, you can set the global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with four columns set globally:
:root {
--columns: 3;
}
.grid {
display: grid;
grid-gap: 10px;
/* Adjusting for the 10px grid-gap as well */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}
.grid > * {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JavaScript add a class that contains the --columns declaration) - see the demo below:
:root {
--columns: 3;
}
.grid {
display: grid;
grid-gap: 10px;
--columns: 4; /* Redefine the number of columns */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}
.grid > * {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Flexbox
Similar arguments are valid for flexboxes - see a simplified demo below:
:root {
--columns: 3;
}
.flexbox {
display: flex;
flex-wrap: wrap;
--columns: 4; /* Redefine the number of columns */
}
.flexbox > * {
background-color: green;
height: 200px;
margin: 10px;
flex-basis: calc(100% / var(--columns) - 20px);
}
<div class="flexbox">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
With a little bit of math, you can add a percentage in a maximum function within the minmax. That way, it will break at 200 pixels, but expand to fill 1/3 of the page (in this case because I used 33%. Just add whatever percentage you want there though).
grid-template-columns: repeat(auto-fit, minmax(max(200px, 33%), 1fr));
Is it possible to define a grid with a maximum number of columns, but allow elements to wrap onto new rows when the screen width changes?
I have implemented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.
Here is a CodePen of one method using Flexbox:
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Another method is to use a grid:
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
I want a fairly generic solution to this. Is what I want to achieve possible without JavaScript or media queries?
With CSS grid you can consider the use of max(width, 100%/N) where N is the maximum number of columns. If the width of the container increases, 100%/N will for sure be bigger than width, thus we won't have more than N elements per row.
.grid-container {
--n: 4; /* The maximum number of columns */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}
.grid-item {
background: tomato;
padding: 5px;
height: 50px;
margin: 10px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
<div class="grid-container" style="--n:3">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
With gaps:
.grid-container {
--n: 4; /* The maximum number of columns */
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)), 1fr));
gap: 10px;
margin: 5px;
}
.grid-item {
background: tomato;
padding: 5px;
height: 50px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
<div class="grid-container" style="--n:3">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
With flexbox, you can simply set a max-width to the container since your elements have a fixed width:
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: calc(5*(200px + 20px));
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.
If you want your elements to expand and cover all the width, you can use a trick with min-width like below:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
min-width: 200px;
width: calc(100%/5 - 20px); /* 5 columns */
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
Here also you need to consider the margin. You can easily make this more flexible using CSS variables:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
--m: 10px;
background: tomato;
padding: 5px;
min-width: 200px;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
You can also consider flex-grow if you want your element to always expand (even when there is a wrap), but you may face the issue of the last row that you need to fix with some hacks:
.flex-container {
display: flex;
flex-wrap: wrap;
--m: 10px;
}
.flex-item {
background: tomato;
padding: 5px;
min-width: 200px;
flex-grow: 1;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing: border-box;
}
.flex-container span {
min-width: 200px;
flex-grow: 1;
width: calc(100%/5 - 2*var(--m)); /* 5 columns */
margin: 0 var(--m);
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- 4 empty elements to fix the issue (we can also use a pseudo element) -->
<span></span>
<span></span>
<span></span>
<span></span>
</div>
In the example below, we made the number of columns to be 5 so we will need at least 4 empty elements to fix the issue in case we will have one to 4 elements in the last row.
Of course, this is a drawback, but since you know the number of columns you can easily set those empty elements and you won't need any JavaScript.
To make it more flexible, here is an idea with CSS variables:
.flex-container {
display: flex;
flex-wrap: wrap;
border: 1px solid;
--m: 10px;
--n: 5;
--width: 150px;
}
.flex-item {
background: tomato;
min-width: var(--width);
flex-grow: 1;
width: calc(100%/var(--n) - 2*var(--m));
height: 50px;
margin: var(--m);
box-sizing: border-box;
}
.flex-container span {
display: contents; /* Each span will give us 2 elements */
}
.flex-container span: before,
.flex-container span: after,
.flex-container: before,
.flex-container: after{
content: "";
min-width: var(--width);
flex-grow: 1;
width: calc(100%/var(--n) - 2*var(--m));
margin :0 var(--m);
order: 1; /* We make sure they are at the end */
}
<div class="flex-container wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="flex-container wrap" style="--n:10">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="flex-container wrap" style="--n:3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<!-- A lot of elements !! -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
I used display: contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.
If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.
You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS variables (usually that's all you need).
CSS Grid Layout
For instance, you can set the global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with four columns set globally:
:root {
--columns: 3;
}
.grid {
display: grid;
grid-gap: 10px;
/* Adjusting for the 10px grid-gap as well */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}
.grid > * {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JavaScript add a class that contains the --columns declaration) - see the demo below:
:root {
--columns: 3;
}
.grid {
display: grid;
grid-gap: 10px;
--columns: 4; /* Redefine the number of columns */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}
.grid > * {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Flexbox
Similar arguments are valid for flexboxes - see a simplified demo below:
:root {
--columns: 3;
}
.flexbox {
display: flex;
flex-wrap: wrap;
--columns: 4; /* Redefine the number of columns */
}
.flexbox > * {
background-color: green;
height: 200px;
margin: 10px;
flex-basis: calc(100% / var(--columns) - 20px);
}
<div class="flexbox">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
With a little bit of math, you can add a percentage in a maximum function within the minmax. That way, it will break at 200 pixels, but expand to fill 1/3 of the page (in this case because I used 33%. Just add whatever percentage you want there though).
grid-template-columns: repeat(auto-fit, minmax(max(200px, 33%), 1fr));
Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?
This is such a simple thing to achieve using an Html table. How do I do it using display: grid ?
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Instead of using an actual border around grid items, use the background color on the container (for "border" color) and the grid-gap property (for "border" width).
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border: 1px solid black;
grid-gap: 1px;
background-color: black;
}
.wrapper > div {
background-color: white;
padding: 15px;
text-align: center;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You may do like this :
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-top: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Another idea is to rely on gradient to fill gaps like below:
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
grid-gap:1px;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat,
repeating-linear-gradient(to right,transparent 0 50px,#000 0 51px);
border:1px solid;
}
.wrapper > div {
padding: 15px;
text-align: center;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You can also adjust the initial solution to make it more flexible and it will work with any number of items inside a row.
Run the below code on full page and resize the window:
.wrapper {
display: grid;
max-width:800px;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
I found a solution by using the outline property.
.grid {
width: 100%;
height: 700px;
display: grid;
grid-template-columns: repeat(4, 25fr);
grid-template-rows: repeat(4, 25fr);
margin-bottom: 30px;
grid-gap: 1px;
}
.grid-item {
background-color: silver;
outline: 1px solid gray; /* The outline creates the border */
text-align: center;
position: relative;
z-index: 1; /* original z-index */
}
/* If you want to change the color on the hover state */
.grid-item:hover {
outline: 1px solid red;
z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */
}
<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 class="grid-item"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
margin:0 -1px -1px 0;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
margin:0 -1px -1px 0;
This should do the trick.
There is an easy way to do this:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
.grid__item {
border: 1px solid gray;
box-sizing: content-box;
width: 100%;
height: 100%;
}
<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
<div class="grid__item">8</div>
<div class="grid__item">9</div>
<div class="grid__item">10</div>
<div class="grid__item">11</div>
<div class="grid__item">12</div>
</div>
P.s. The main trick here is in box-sizing: content-box. You don't need it if you do not globally override it with another value. But many people uses border-box, in that case, this override solves the problem with the gap.
Something I've used with success is simply adding a box shadow to the grid items, along with a column and row gap. This then allows the columns size to always be exactly as determined in grid-template-columns.
Then simply changing the column and row gap and box shadow size allows for a thicker border.
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-column-gap: 1px;
grid-row-gap: 1px;
}
.wrapper > div {
padding: 15px;
text-align: center;
box-shadow: 0 0 0 1px;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
For anyone who will struggle with an odd number of elements and a specific amount of frames you can use the following approach
<style>
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
border: 1px solid;
grid-gap: 1px;
}
.element {
display: flex;
flex-direction: column;
background-color: azure;
min-height: 10rem;
border: 1px solid;
margin: -1px;
}
</style>
<body>
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</body>
https://codepen.io/sergeytkhojevskiy/pen/XWZOJOL
The win-win code would be to set
grid items: border-bottom & border-right
grid wrapper: border-top & border-left
So it would correct even if top columns not equal to bottom columns
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
If you will fix the number of item per row this solution will fit you,
this example for 3 each row, but you can edit
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
grid-template-areas: '. . .';
}
.grid-item {
order: 0;
flex: 0 1 auto;
text-align: center;
padding: 1rem;
font-size: 12px;
background-color: #e8e8e8;
border-color: #000;
border-style: solid;
border-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
}
/*first 3 items*/
.grid-item:nth-child(-n + 3) {
border-top-width: 1px;
}
/*last item on each row*/
.grid-item:nth-child(3n + 0) {
border-right-width: 1px;
background-color: cadetblue;
}
/*first item on each row*/
.grid-item:first-child,
.grid-item:nth-child(3n + 1) {
border-left-width: 1px;
background-color: red;
}
/*middel item on each row (not used)*/
.grid-item:nth-child(3n - 1) {
// border-left-width: 1px;
background-color: yellow;
}
/*last item (not used)*/
.grid-item:last-child {
// border-left-width: 0;
background-color: green
}
<div class="grid-container">
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
</div>
Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?
This is such a simple thing to achieve using an Html table. How do I do it using display: grid ?
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Instead of using an actual border around grid items, use the background color on the container (for "border" color) and the grid-gap property (for "border" width).
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border: 1px solid black;
grid-gap: 1px;
background-color: black;
}
.wrapper > div {
background-color: white;
padding: 15px;
text-align: center;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You may do like this :
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-top: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
Another idea is to rely on gradient to fill gaps like below:
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
grid-gap:1px;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat,
repeating-linear-gradient(to right,transparent 0 50px,#000 0 51px);
border:1px solid;
}
.wrapper > div {
padding: 15px;
text-align: center;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
You can also adjust the initial solution to make it more flexible and it will work with any number of items inside a row.
Run the below code on full page and resize the window:
.wrapper {
display: grid;
max-width:800px;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
body {
background:pink;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
I found a solution by using the outline property.
.grid {
width: 100%;
height: 700px;
display: grid;
grid-template-columns: repeat(4, 25fr);
grid-template-rows: repeat(4, 25fr);
margin-bottom: 30px;
grid-gap: 1px;
}
.grid-item {
background-color: silver;
outline: 1px solid gray; /* The outline creates the border */
text-align: center;
position: relative;
z-index: 1; /* original z-index */
}
/* If you want to change the color on the hover state */
.grid-item:hover {
outline: 1px solid red;
z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */
}
<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 class="grid-item"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
margin:0 -1px -1px 0;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
margin:0 -1px -1px 0;
This should do the trick.
There is an easy way to do this:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
.grid__item {
border: 1px solid gray;
box-sizing: content-box;
width: 100%;
height: 100%;
}
<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
<div class="grid__item">8</div>
<div class="grid__item">9</div>
<div class="grid__item">10</div>
<div class="grid__item">11</div>
<div class="grid__item">12</div>
</div>
P.s. The main trick here is in box-sizing: content-box. You don't need it if you do not globally override it with another value. But many people uses border-box, in that case, this override solves the problem with the gap.
Something I've used with success is simply adding a box shadow to the grid items, along with a column and row gap. This then allows the columns size to always be exactly as determined in grid-template-columns.
Then simply changing the column and row gap and box shadow size allows for a thicker border.
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-column-gap: 1px;
grid-row-gap: 1px;
}
.wrapper > div {
padding: 15px;
text-align: center;
box-shadow: 0 0 0 1px;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
For anyone who will struggle with an odd number of elements and a specific amount of frames you can use the following approach
<style>
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
border: 1px solid;
grid-gap: 1px;
}
.element {
display: flex;
flex-direction: column;
background-color: azure;
min-height: 10rem;
border: 1px solid;
margin: -1px;
}
</style>
<body>
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</body>
https://codepen.io/sergeytkhojevskiy/pen/XWZOJOL
The win-win code would be to set
grid items: border-bottom & border-right
grid wrapper: border-top & border-left
So it would correct even if top columns not equal to bottom columns
.wrapper {
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
border-top: 1px solid black;
border-left: 1px solid black;
}
.wrapper > div {
padding: 15px;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
If you will fix the number of item per row this solution will fit you,
this example for 3 each row, but you can edit
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
grid-template-areas: '. . .';
}
.grid-item {
order: 0;
flex: 0 1 auto;
text-align: center;
padding: 1rem;
font-size: 12px;
background-color: #e8e8e8;
border-color: #000;
border-style: solid;
border-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
}
/*first 3 items*/
.grid-item:nth-child(-n + 3) {
border-top-width: 1px;
}
/*last item on each row*/
.grid-item:nth-child(3n + 0) {
border-right-width: 1px;
background-color: cadetblue;
}
/*first item on each row*/
.grid-item:first-child,
.grid-item:nth-child(3n + 1) {
border-left-width: 1px;
background-color: red;
}
/*middel item on each row (not used)*/
.grid-item:nth-child(3n - 1) {
// border-left-width: 1px;
background-color: yellow;
}
/*last item (not used)*/
.grid-item:last-child {
// border-left-width: 0;
background-color: green
}
<div class="grid-container">
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
</div>