Skip to content

Commit

Permalink
update(CSS): web/css/css_grid_layout/basic_concepts_of_grid_layout
Browse files Browse the repository at this point in the history
  • Loading branch information
undead404 authored and AdriandeCita committed Nov 9, 2022
1 parent ad13939 commit 9562355
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,12 @@ _Сітковий контейнер_ утворюється шляхом ого

## Сіткові доріжки

Ряди й колонки сітки визначаються властивостями {{cssxref("grid-template-rows")}} і {{cssxref("grid-template-columns")}}. Вони визначають сіткові доріжки. _Сіткова доріжка_ – це простір між будь-якими двома лініями сітки. На зображенні нижче доріжка виділена – це перша рядкова доріжка сітки.
Ряди й колонки сітки визначаються властивостями {{cssxref("grid-template-rows")}} і {{cssxref("grid-template-columns")}}. Вони визначають сіткові доріжки. _Сіткова доріжка_ – це простір між будь-якими двома лініями сітки. На зображенні нижче виділена доріжка – це доріжка першого ряду сітки.

![Рамки з трьома сітковими елементами. Над трьома елементами – однорідна світло-зелена область, котра і є доріжкою.](1_grid_track.png)

Сіткові доріжки визначаються в явній сітці за допомогою властивостей `grid-template-columns` і `grid-template-rows` або властивостей-скорочень `grid` і `grid-template`. Крім того, в неявній сітці доріжки створюються шляхом розташування елемента сітки поза доріжками, створеними в явній сітці.

### Базовий приклад

До попереднього прикладу можна додати властивість `grid-template-columns`, після чого – визначити розмір колонкових доріжок.
Expand Down Expand Up @@ -232,7 +234,7 @@ _Сітковий контейнер_ утворюється шляхом ого

### Змішування гнучких та абсолютних розмірів

У цьому заключному прикладі змішуються доріжки з абсолютним розміром та одиниці `fr`. Перша доріжка - 500 пікселів, тож від доступного простору віднімається фіксована ширина. Решта простору ділиться натроє й пропорційно присвоюється двом гнучким доріжкам.
У цьому завершальному прикладі змішуються доріжки з абсолютним розміром та одиниці `fr`. Перша доріжка - 500 пікселів, тож від доступного простору віднімається фіксована ширина. Решта простору ділиться натроє й пропорційно присвоюється двом гнучким доріжкам.

```html
<div class="wrapper">
Expand Down
1 change: 1 addition & 0 deletions uk_spelling_additions.txt
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
несемантичних
несимвольними
несимвольні
нестатично
нетегованим
нетегованих
нетеговані
Expand Down

0 comments on commit 9562355

Please sign in to comment.