Ś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

przykład 1

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: grid;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 2

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: inline-grid;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 3

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: grid;
grid-template-columns: auto auto auto auto;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 4

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: inline-grid;
grid-template-columns: auto auto auto auto;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 5

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: inline-grid;
grid-auto-flow: column;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 6

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: inline-grid;
grid-auto-flow: row;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 7 – kolejność

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
</div>
.hold {
display: grid;
grid-template-columns: auto auto auto auto;
} 
.item-1:nth-of-type(1) {
order: 3;
}
.item-2:nth-of-type(2) {
order: 1;
}
.item-3:nth-of-type(3) {
order: 4;
}
.item-4:nth-of-type(4) {
order: 2;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 8

<div class="hold">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
</div>
.hold {
display: grid;
grid-template-columns: 1fr auto;
}
item 1
item 2 – Lorem ipsum dolor sit amet

Autoprefixer CSS online

przykład 9 – bez konieczności podawania ilości kolumn

<div class="hold">
<div class="item item-1">item 1</div>
<div class="item item-2">item 2</div>
<div class="item item-3">item 3</div>
<div class="item item-4">item 4</div>
</div>
.hold {
display: grid;
grid-auto-flow: column;
justify-content: space-between;
}
.hold-9 .item {
width: 150px;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

linki