CSS Grid - Maximum Number of Columns Without Media Queries

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



Leave a reply



Submit