Шпаргалка По Grid Контейнерной Сетке 🙉
Всем привет! На связи - #сквозьпризмувебразработки
Grid сетка - это система разметки, которая позволяет создавать столбцы и строки для более точной и простой верстки веб-страниц. Ниже приведена шпаргалка по Grid сетке:
Grid сетка - это система разметки, которая позволяет создавать столбцы и строки для более точной и простой верстки веб-страниц. Ниже приведена шпаргалка по Grid сетке:
1. Создайте контейнер-элемент с помощью свойства display: grid.
2. Определите количество столбцов с помощью свойства grid-template-columns. Например, grid-template-columns: repeat(1fr) создаст три столбца с одинаковой шириной.
3. Определите количество строк с помощью свойства grid-template-rows. Например, grid-template-rows: 100px 200px создаст две строки с высотой 100px и 200px соответственно.
4. Определите расположение элементов с помощью свойства grid-row и grid-column. Например, grid-row: 1/3 и grid-column: 2/4 расположит элемент во втором и третьем столбцах, занимая первые две строки.
5. Используйте свойство grid-gap для создания промежутков между столбцами и строками.
6. Используйте свойство justify-items и align-items для выравнивания элементов внутри сетки по горизонтали и вертикали соответственно.
7. Используйте свойство grid-template-areas для создания областей в сетке и легкой ориентации элементов внутри этих областей.
Уникальность текста - https://vk.cc/cnR2TH
P.S. Ниже прикреплена наглядная шпаргалка по этим и некоторым другим дополнительным свойствам.
Шпаргалка по GRID - https://vk.cc/cnR34j
#fullstack@throughlensdevelop, #fullstack, #frontend@throughlensdevelop, #frontend, #html@throughlensdevelop, #html, #css@throughlensdevelop, #css, #junior@throughlensdevelop, #junior, #блогkidys, #блогденисакитаева
2. Определите количество столбцов с помощью свойства grid-template-columns. Например, grid-template-columns: repeat(1fr) создаст три столбца с одинаковой шириной.
3. Определите количество строк с помощью свойства grid-template-rows. Например, grid-template-rows: 100px 200px создаст две строки с высотой 100px и 200px соответственно.
4. Определите расположение элементов с помощью свойства grid-row и grid-column. Например, grid-row: 1/3 и grid-column: 2/4 расположит элемент во втором и третьем столбцах, занимая первые две строки.
5. Используйте свойство grid-gap для создания промежутков между столбцами и строками.
6. Используйте свойство justify-items и align-items для выравнивания элементов внутри сетки по горизонтали и вертикали соответственно.
7. Используйте свойство grid-template-areas для создания областей в сетке и легкой ориентации элементов внутри этих областей.
Уникальность текста - https://vk.cc/cnR2TH
P.S. Ниже прикреплена наглядная шпаргалка по этим и некоторым другим дополнительным свойствам.
Шпаргалка по GRID - https://vk.cc/cnR34j
#fullstack@throughlensdevelop, #fullstack, #frontend@throughlensdevelop, #frontend, #html@throughlensdevelop, #html, #css@throughlensdevelop, #css, #junior@throughlensdevelop, #junior, #блогkidys, #блогденисакитаева
#блогденисакитаева
#блогkidys
#fullstack@throughlensdevelop
#frontend@throughlensdevelop
#html@throughlensdevelop
#css@throughlensdevelop
#junior@throughlensdevelop
#it_kidys
#junior
#grid