CSS grid - maximum number of columns without 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>
Restricting responsive grid to 2 columns max?
Use max()
combined with viewport unit to make the column width always big enough to always have a fixed number of columns on big screen (in your case 2).
grid-template-columns: repeat(auto-fit, minmax(max(195px,Xvw), 2fr));
Adjust the X
until you get the result you want.
Example:
.box {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(max(195px, 45vw), 2fr));
margin: 10px;
grid-gap: 40px;
}
.box>* {
height: 100px;
background: red
}
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
How to specify the maximum number of columns repeat() will create using auto-fit/fill?
CSS custom properties ('CSS variables') to the rescue
.grid {
--repeat: auto-fit;
}
@media (min-width: calc(250px * 3)) {
.grid {
--repeat: 3;
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--repeat, auto-fit), minmax(calc(250px * 1) , 1fr));
grid-gap: 8px;
}
.grid .item {
background-color: silver;
padding: 8px;
}
<div class="grid">
<div class="item">Lorem, ipsum.</div>
<div class="item">Soluta, voluptatibus!</div>
<div class="item">Reprehenderit, consequuntur.</div>
<div class="item">Temporibus, veritatis!</div>
<div class="item">Consequatur, voluptates.</div>
<div class="item">Distinctio, adipisci.</div>
<div class="item">Repellat, corrupti.</div>
<div class="item">Quia, corporis.</div>
<div class="item">Nobis, aut.</div>
<div class="item">Dicta, officiis?</div>
<div class="item">Voluptate, tempora?</div>
<div class="item">Nihil, earum?</div>
<div class="item">Placeat, aspernatur!</div>
<div class="item">Officia, sunt?</div>
<div class="item">Atque, temporibus!</div>
<div class="item">Rerum, unde!</div>
<div class="item">Hic, molestias!</div>
<div class="item">Et, repellat!</div>
<div class="item">Earum, itaque.</div>
<div class="item">Doloribus, facilis.</div>
<div class="item">Eius, alias!</div>
<div class="item">Est, officia.</div>
<div class="item">Ad, porro!</div>
<div class="item">Ipsum, voluptates.</div>
<div class="item">Animi, eligendi.</div>
<div class="item">Tempore, hic!</div>
<div class="item">Voluptatibus, illum.</div>
<div class="item">Autem, cumque!</div>
<div class="item">Cupiditate, minus!</div>
<div class="item">Tenetur, aliquam.</div>
</div>
What is the maximum amount of columns and/or rows in a css grid
The CSS grid seems to have a different column/row limit depending on the browser.
For chrome the limit seems to be 1,000x1,000 as explained here in the answer of Bludev
For firefox the limit seems to be 10,000x10,000, but I can't remember exactly where i read this.
CSS grid-template-columns not changing even though code is active in media query
You have grid-column: 1 / 5
applied to .site_url
. But you don't override this to 1 / 4
when you reduce the number of columns in your media query.
This forces creation of implicit grid to span this grid item to 4 columns as specified.
There is a better way to do full width elements in grid that circumvents this issue.
Use grid-column: 1 / -1
instead. This tells the grid item to start at first grid line from the left to the last grid line on the right.
CSS Grid single column layout for mobile without media queries
No you must use media query
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "one" "two" "three" "four";
}
How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{ display: grid; grid-template-columns: 260px 260px 260px; grid-gap: 18px; background-color: #fff; color: #444; justify-content: center; }
.card { border: 1px solid #000; width: 260px; height: 260px;}
<div class="container"> <div class="grid-container"> <div class="grid-item"> <div class="card"></div> </div> <div class="grid-item"> <div class="card"></div> </div> <div class="grid-item"> <div class="card"></div> </div> <div class="grid-item"> <div class="card"></div> </div> <div class="grid-item"> <div class="card"></div> </div> <div class="grid-item"> <div class="card"></div> </div></div></div>
Related Topics
Remove Default Text/Placeholder Present in HTML5 Input Element of Type=Date
How to Force Table Cell <Td> Content to Wrap
How to Do Awesome Refreshless Page Changes Like Github Do
Set Height 100% on Absolute Div
Why Are Dashes Preferred for CSS Selectors/HTML Attributes
How to Show Multiline Text in a Table Cell
Giving a Border to an HTML Table Row, <Tr>
P-End-Tag (</P>) Is Not Needed in HTML
How to Make a Div 50Px Less Than 100% in CSS3
How to Vertically Align Text with Icon Font
Issue with CSS Media Queries(Scrollbar)
How to Center an Iframe Horizontally
Fill Remaining Vertical Space - Only CSS
How to Set Div's Height in CSS and HTML
Do HTML Websockets Maintain an Open Connection for Each Client? Does This Scale
Input Type=Password, Don't Let Browser Remember the Password