Posizionamento in PX
<div class="wrapper px">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
<hr />
Posizionamento in FR
<div class="wrapper fr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
<hr />
Posizionamento in FR 2
<div class="wrapper fr2">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
<hr />
Posizionamento in FR repeat()
<div class="wrapper fr-r">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
.wrapper.px {
display: grid;
grid-template-columns: 200px 200px 200px;
}
.wrapper.fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.wrapper.fr2 {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
.wrapper.fr-r {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
/* Dress */
.wrapper {
padding: 20px;
}
.wrapper > div {
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #f9f9f9;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.