Направление и порядок элементов в сетке grid

Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов. А именно свойства grid-auto-flow и order.

Свойство grid-auto-flow

В грид-контейнере всегда все элементы располагаются горизонтально то есть в ряд, а как тоько места в контейнере больше нет, то элементы переносятся соответственно на следующую строку. А вот с помощью свойства grid-auto-flow можно изменить направление элементов. Собственно свойство принимает 2 значения:

row: это значение по умолчанию, элементы могут располагаться горизонтально, а как только места уже не будет хватать будут переноситься на следующую строку
column: элементы будут располагаться вертикально друг под другом, а как только места в столбце не будет хватать, то элементы будут переноситься на следующий столбец

Порядок и направление элементов в сетке grid

		Это интересно 0	Как всё будет выглядеть в блоге: Направление и порядок элементов в сетке grid Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/14177725/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Направление и порядок элементов в сетке grid </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов </div> </div> Направление и порядок элементов в сетке grid <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/14177725/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Направление и порядок элементов в сетке grid</a> <div style="font-family:trebuchet MS;">Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов </div> </div>

webguru

14.10.2017

В избранное Пожаловаться Просмотров: 317

Комментарии ⁰

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

Направление и порядок элементов в сетке grid

Свойство grid-auto-flow

Комментарии временно отключены

Открытая группа
38977 участников