Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

Jednostki grid

kodzik

Wraz z CSS Grid pojawiła się nowa elastyczna jednostka: fr.

fr – fraction of available space

skrótowo
grid-template-columns: 1fr 1fr 1fr;grid-template-columns: repeat(3, 1fr);
grid-template-columns: 250px 1fr 1fr 1fr 1fr 1fr 1fr;grid-template-columns: 250px repeat(6, 1fr);
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 3fr 1fr;		grid-template: 1fr 3fr 1fr / 3fr 1fr;

fr

<div class="wrap-fr">
    <div>grid 1</div>
    <div>grid 2</div>
    <div>grid 3</div>
    <div>grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap-fr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
grid 1
grid 2
grid 3
grid 4

auto

<div class="wrap-auto">
    <div>grid 1</div>
    <div>grid 2</div>
    <div>grid 3</div>
    <div>grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap-auto {
    display: grid;
    grid-template-columns: auto auto auto auto;
}
grid 1
grid 2
grid 3
grid 4

auto + fr

<div class="wrap-auto-fr">
    <div>grid 1</div>
    <div>grid 2</div>
    <div>grid 3</div>
    <div>grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap-auto-fr {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
}
grid 1
grid 2
grid 3
grid 4

%

<div class="wrap-percent">
    <div>grid 1</div>
    <div>grid 2</div>
    <div>grid 3</div>
    <div>grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap-percent {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
grid 1
grid 2
grid 3
grid 4

px

<div class="wrap-px">
    <div>grid 1</div>
    <div>grid 2</div>
    <div>grid 3</div>
    <div>grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap-px {
    display: grid;
    grid-template-columns: 90px 90px 90px 90px;
}
grid 1
grid 2
grid 3
grid 4

linki