Scribd
Upload
47 views1 page

Create Flexible Layouts Using Auto Fit

The document defines two CSS grid containers with different grid-template-column properties. The first container uses "repeat(auto-fill, minmax(60px, 1fr))" to create columns that fill the container, while the second uses "repeat(auto-fit, minmax(60px, 1fr))" to create columns that fit within the container without overflowing. Both containers have three rows and a grid gap of 10px.

Uploaded by

Luis Fernando Meza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
47 views1 page

Create Flexible Layouts Using Auto Fit

The document defines two CSS grid containers with different grid-template-column properties. The first container uses "repeat(auto-fill, minmax(60px, 1fr))" to create columns that fill the container, while the second uses "repeat(auto-fit, minmax(60px, 1fr))" to create columns that fit within the container without overflowing. Both containers have three rows and a grid gap of 10px.

Uploaded by

Luis Fernando Meza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<style>

.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}

.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
/* Only change code below this line */

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

/* Only change code above this line */


grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

You might also like