Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

Grid podstawy

kodzik

Moduł CSS Grid Layout Module oferuje system układu oparty na siatce, z wierszami i kolumnami, co ułatwia projektowanie stron internetowych bez konieczności używania float i pozycjonowania.

obrazek

CSS Grid Layout Generator

grid vs inline-grid

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

.grid {
    color: black;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}Code language: CSS (css)
.wrap {
    display: grid;
}Code language: CSS (css)
grid 1
grid 2
grid 3
grid 4
.wrap {
    display: grid;
    grid-template-columns: auto auto auto auto;
}Code language: CSS (css)
1
grid grid grid grid grid grid 2
3
grid 4
.wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}Code language: CSS (css)
1
grid grid gridgrid grid grid 2
3
grid 4
.wrap {
    display: inline-grid;
}Code language: CSS (css)
grid 1
grid 2
grid 3
grid 4
.wrap {
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
}Code language: CSS (css)
grid 1
grid 2
grid 3
grid 4
.wrap {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}Code language: CSS (css)
grid 1
grid 2
grid 3
grid 4

kolejność

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

linki