Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid podstawy

kodzik
Grid 

fr, czyli fraction of available space

grid-template-columns: 1fr 1fr 1fr;
skrótowo:
grid-template-columns: repeat(3, 1fr);

grid-template-columns i grid-template-rows
skrótowo:
grid-template: 1fr 3fr 1fr / 3fr 1fr;

Układ siatki – przykład

Układ siatki z trzema kolumnami po 100px szerokości i sześcioma elementami siatki o szerokości 50px i wysokości 50px:

<div class="hold-0">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
.hold-0 {
	border: 1px dashed white;
	width: 400px;
	height: 200px;
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: auto;
}

.hold-0 .grid  {
	width: 50px;
	height: 50px;	
}
1
2
3
4
5
6
.item-1 { background-color: #289FCC; }
.item-2 { background-color: #6BC1E2; }
.item-3 { background-color: #4BB0D6; }
.item-4 { background-color: #078FC2; }

przykład 1

<div class="hold-1">
	<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-1 {
	display: grid;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 2

<div class="hold-2">
	<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-2 {
	display: inline-grid;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 3

<div class="hold-3">
	<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-3 {
	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-4">
	<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-4 {
	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-5">
	<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-5 {
	display: inline-grid;
	grid-auto-flow: column;
}
item 1
item 2
item 3
item 4

Autoprefixer CSS online

przykład 6

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

Autoprefixer CSS online

linki