Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Jednostki grid

kodzik
Grid 

px

<div class="hold-px">
	<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>


.item6-blok .hold-px {
	display: grid;
	grid-template-columns: 90px 90px 90px 90px;
}
item 1
item 2
item 3
item 4

%

<div class="hold-procent">
	<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>


.item6-blok .hold-procent {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}
item 1
item 2
item 3
item 4

fr

<div class="hold-fr">
	<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>


.item6-blok .hold-fr {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
item 1
item 2
item 3
item 4

auto

<div class="hold-auto">
	<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>


.item6-blok .hold-auto {
	display: grid;
	grid-template-columns: auto auto auto auto;
}
item 1
item 2
item 3
item 4

auto + fr

<div class="hold-auto-fr">
	<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>


.item6-blok .hold-auto-fr {
	display: grid;
	grid-template-columns: auto 1fr 1fr 1fr;
}
item 1
item 2
item 3
item 4

linki