update html css

docs/html-css/02-flex-grid.md

@@ -2,4 +2,45 @@
 sidebar_position: 2
 ---
 
-# Сетка flexbox, grid
+# Сетка flexbox, grid
+Источник: DeepSeek
+
+## Flexbox
+Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
+
+#### Основные концепции Flexbox
+
+Flexbox работает с двумя основными сущностями:
+1. **Flex Container** (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство `display: flex` или `display: inline-flex`.
+2. **Flex Items** (элементы) — дочерние элементы внутри flex-контейнера.
+
+#### Преимущества Flexbox:
+- Простое создание адаптивных макетов.
+- Легкое выравнивание элементов по горизонтали и вертикали.
+- Гибкость в управлении размерами и порядком элементов.
+
+#### Когда использовать Flexbox:
+- Для создания одномерных макетов (например, навигационные панели, карточки, списки).
+- Когда нужно выравнивать элементы внутри контейнера.
+- Для создания адаптивных интерфейсов.
+
+## Grid
+**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
+
+#### Основные концепции Grid
+1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
+2. **Grid Items** (элементы) — дочерние элементы внутри grid-контейнера.
+3. **Grid Lines** (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
+4. **Grid Tracks** (дорожки) — пространство между двумя соседними линиями (строки или столбцы).
+5. **Grid Cells** (ячейки) — пересечение строки и столбца (минимальная единица сетки).
+6. **Grid Areas** (области) — прямоугольные области, состоящие из одной или нескольких ячеек.
+
+#### Преимущества Grid:
+- Полный контроль над строками и столбцами.
+- Простое создание сложных макетов.
+- Гибкость в управлении размерами и расположением элементов.
+
+#### Когда использовать Grid:
+- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
+- Когда нужно точно контролировать расположение элементов.
+- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.