Make CSS Grid autocomplete only 2 columns
I am using CSS Grid and made the following layout in the code found here: https://codepen.io/alexg2195/pen/xLEeMd
My problem is that when repeat(auto-fill, minmax(400px, 1fr));
I use I get a layout that goes beyond two columns.
Is there a way to force two columns but still have the same autocomplete resizing modes?
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
</div>
<div class="btn">BTN</div>
</div>
source to share
Is there a way to force two columns, but still have the same minimal resizing?
Not with auto-fill
/ auto-fit
.
These functions are built to fit as many tracks as possible without overflowing the container.
7.2.2.2. Repeat to fill:
auto-fill
andauto-fit
repeatsWhen
auto-fill
specified as a repetition number, if the grid container has a specific size or maximum size on the corresponding axis, then the repetition count is the largest possible positive integer that does not overflow the grid container grid.
To "autocomplete" a maximum of two columns per row, you need to find another method.
Maybe flexbox?
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 0 40%;
margin: 5px;
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
div.box.n {
visibility: hidden; /* https://stackoverflow.com/q/42176419/3597276 */
height: 0;
}
<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
<div class="box n">N</div>
</div>
<div class="btn">BTN</div>
</div>
source to share