Для запуска этого приложения необходимо включить JavaScript .
Генератор Grid верстки
Рад представить Вам интерактивный инструмент для генерации верстки основанной на макете сетки (CSS Grid Layout ), он позволит наглядно произвести верстку необходимого блока для Вашего сайта. Кроме того, вы сможете максимально быстро обучиться этой технологии верстки, используя встроенные подсказки для каждого CSS свойства, или при необходимости перейти в справочник CSS свойств для получения более детальной информации о конкретном свойстве.
Конструктор Grid
Настройки контейнера
height
?
Устанавливает фиксированную высоту для контейнера. Используйте значение auto для установки автоматических значений (браузер вычисляет высоту самостоятельно).
display
?
Определяет как должен отображаться элемент:
grid - элемент отображается как блочный grid-контейнер.inline-grid - элемент будет отображаться как строчный grid-контейнер.
grid
inline-grid
grid-template-columns
?
Определяет количество, наименование и размер столбцов (дорожек) в макете сетки. Возможные значения:
none - ключевое слово, означающее, что явная сетка макета не создается. Любые столбцы будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-columns . Является значением по умолчанию .length / percentage - задает размер столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным. flex - неотрицательное значение в "гибких" единицах измерения fr (fractional unit ). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1 , они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.max-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.min-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце.minmax(min, max) - функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.auto - размер столбцов определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content , а как минимум, представляет самый большой минимальный размер. Автоматические размеры столбцов допускается растягивать с помощью свойств align-content и justify-content .fit-content( length | percentage ) - представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content)) , за исключением того, что размер столбца зажимается значением argument , если он больше, чем автоматический минимум.repeat( [ positive-integer | auto-fill | auto-fit ] , track-list ) - представляет из себя повторяющийся фрагмент списка столбцов (дорожек), позволяя записать в более компактной форме большое количество столбцов с повторяющимся шаблоном. Возможные значения:
positive-integer - положительное целое число, которое определяет количество повторений.auto-fill - если контейнер сетки имеет определенный или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не вызывает переполнения сетки. Если любое количество повторений будет вызывать переполнение контейнера, то количество повторений будет равно 1 . В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, число повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз. Другими словами auto-fill заполняет строку любым количеством столбцов. Таким образом, он создает неявные столбцы всякий раз, когда новый столбец может поместиться, потому что он пытается заполнить строку как можно большим количеством столбцов. Добавленные столбцы могут быть пустыми, но они все равно будут занимать определенное место в строке.auto-fit - ведет себя так же, как auto-fill , за исключением того, что после размещения элементов сетки пустые повторяющиеся дорожки объединяются (это может привести к тому, что все дорожки будут объеденены, если все они пусты). Другими словами auto-fit помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными столбцами (как при автоматическом заполнении), а затем сворачивает пустые.
grid-template-rows
?
Определяет количество, наименование и размер строк в макете сетки. Возможные значения:
none - Ключевое слово, означающее, что явная сетка макета не создается. Любые строки будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-rows . Является значением по умолчанию. length / percentage - Задает размер строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным. flex - Неотрицательное значение в "гибких" единицах измерения fr (fractional unit ). Каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1 , они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер строк сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.max-content - Ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в столбце.min-content - Ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в столбце.minmax(min, max) - Функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.auto - Размер строк определяется размером контейнера и размером содержимого элементов в строке. Как максимум, идентичен значению max-content , а как минимум, представляет самый большой минимальный размер. Автоматические размеры строк допускается растягивать с помощью свойств align-content и justify-content .fit-content( length | percentage ) - представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content)) , за исключением того, что размер строки зажимается значением argument , если он больше, чем автоматический минимум.repeat( [ positive-integer | auto-fill | auto-fit ] , track-list ) - представляет из себя повторяющийся фрагмент списка столбцов (дорожек), позволяя записать в более компактной форме большое количество столбцов с повторяющимся шаблоном. Возможные значения:
positive-integer - положительное целое число, которое определяет количество повторений.auto-fill - если контейнер сетки имеет определенный или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не вызывает переполнения сетки. Если любое количество повторений будет вызывать переполнение контейнера, то количество повторений будет равно 1 . В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, число повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз. Другими словами auto-fill заполняет строку любым количеством столбцов. Таким образом, он создает неявные столбцы всякий раз, когда новый столбец может поместиться, потому что он пытается заполнить строку как можно большим количеством столбцов. Добавленные столбцы могут быть пустыми, но они все равно будут занимать определенное место в строке.auto-fit - ведет себя так же, как auto-fill , за исключением того, что после размещения элементов сетки пустые повторяющиеся дорожки объединяются (это может привести к тому, что все дорожки будут объеденены, если все они пусты). Другими словами auto-fit помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными строками (как при автоматическом заполнении), а затем сворачивает пустые.
grid-gap
?
Определяет расстояние (промежуток) между строками и столбцами в макете сетки и является сокращенным свойством для свойств grid-row-gap и grid-column-gap .
align-items
?
Производит выравнивание всех элементов макета сетки по оси столбца grid-контейнера. Возможные значения:
stretch - элементы сетки макета растягиваются вдоль столбца. Это значение по умолчанию. center - элементы располагаются по центру строки контейнера (середина столбца).flex-start - элементы располагаются в начале строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start .flex-end - Элементы располагаются в конце строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end .baseline - Элементы распологаются по их базовой линии.
stretch
center
flex-start
flex-end
baseline
justify-items
?
Производит выравнивание всех элементов макета сетки по оси строки grid-контенера. Возможные значения:
stretch - элементы растягиваются по размеру строки ячейки контейнера. Если объединенный размер элементов меньше размера контейнера выравнивания, все элементы с автоматическим размером увеличиваются поровну (не пропорционально), при этом соблюдаются ограничения, налагаемые параметром max-height / max-width (или эквивалентной функциональностью), так что объединенный размер точно заполняет контейнер выравнивания. Это значение по умолчанию. center - элементы размещаются в середине каждой ячейки контейнера.flex-start - элементы размещаются по начальному краю ячеек. Допускается использование сокращенного значения start .flex-end - элементы размещаются по конечному краю ячеек. Допускается использование сокращенного значения end .baseline - элементы распологаются по их базовой линии.
stretch
center
flex-start
flex-end
baseline
place-items
?
Производит выравнивание всех элементов макета сетки по оси столбца и по оси строки grid-контейнера. Является сокращенным свойством для свойств align-items и justify-items .
stretch
center
flex-start
flex-end
baseline
stretch
center
flex-start
flex-end
baseline
align-content
?
Определяет как браузер производит выравнивание всего макета сетки по оси столбца grid-контейнера. Возможные значения:
stretch - строки внутри контейнера равномерно растягиваются, заполняя свободное пространство (изменяет размер элементов сетки, или флекс элементов, чтобы элементы заполнили всю высоту контейнера). Это значение по умолчанию. flex-start - строки внутри контейнера располагаются у начального края сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start .flex-end - строки внутри контейнера располагаются по краю сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end .center - строки внутри контейнера располагаются по его центру.space-between - строки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.space-around - строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.space-evenly - размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера.
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
justify-content
?
Определяет как браузер производит выравнивание всего макета сетки по оси строки grid-контейнера. Возможные значения:
flex-start - элементы позиционируются в начале контейнера. Это значение по умолчанию.
Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start .flex-end - элементы позиционируются в конце контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end .center - элементы позиционируются в центре строки контейнера.space-between - элементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера.space-around - элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего элемента равно половине между соседними элементами в контейнере.space-evenly - размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера.
flex-start
flex-end
center
space-between
space-around
space-evenly
place-content
?
Производит выравнивание всего макета сетки по оси столбца и по оси строки grid-контейнера. Является сокращенным свойством для свойств align-content и justify-content .
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
flex-start
flex-end
center
space-between
space-around
space-evenly
grid-auto-columns
?
Задает размер неявно созданных столбцов в контейнере сетки макета. Это свойство влияет только на те столбцы, размер которых явно не задан. Возможные значения:
auto - размер столбцов определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content, а как минимум, представляет самый большой минимальный размер. Автоматические размеры столбцов допускается растягивать с помощью свойств align-content и justify-content . Является значением по умолчанию. length / percentage - задает размер неявно созданных столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным. flex - неотрицательное значение в "гибких" единицах измерения fr (fractional unit ). Каждый неявно созданный столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , неявно созданные столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1 , они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.max-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.min-content - ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце.minmax(min, max) - функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.fit-content( length | percentage ) - представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content)) , за исключением того, что размер столбца зажимается значением argument , если он больше, чем автоматический минимум.
grid-auto-rows
?
Задает размер неявно созданных строк в контейнере сетки макета. Это свойство влияет только на те строки, размер которых явно не задан. Возможные значения:
auto - размер строк определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content , а как минимум, представляет самый большой минимальный размер. Автоматические размеры строк допускается растягивать с помощью свойств align-content и justify-content . Является значением по умолчанию. length / percentage - Задает размер неявно созданных строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным. flex - неотрицательное значение в "гибких" единицах измерения fr (fractional unit ). Каждая неявно созданная строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , неявно созданные строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк, или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1 , они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер строк сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.max-content - ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в строке.min-content - ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в строке.minmax(min, max) - функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в "гибких" единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.fit-content( length | percentage ) - представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content)) , за исключением того, что размер строки зажимается значением argument , если он больше, чем автоматический минимум.
grid-auto-flow
?
Определяет, как работает алгоритм автоматического размещения для неявно созданных элементов макета, указывая как они будут размещены в сетке макета. Возможные значения:
row - ключевое слово, которое указывает, что алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости. Является значением по умолчанию.column - ключевое слово, которое указывает, что алгоритм автоматического размещения размещает элементы, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости.dense - ключевое слово, указывающее, что алгоритм автоматического размещения использует "плотный" алгоритм размещения элементов, который пытается заполнить ранее образованные пустоты в сетке, если далее в макете появятся подходящие по размеру элементы. Это может привести к появлению элементов не в порядке их указания, при этом заполняются отверстия, оставленные большими элементами. Если это ключевое слово dense опущено, то используется "разреженный" алгоритм, который размещает элементы в сетки не отступая для заполнения пустот. Это гарантирует, что все автоматически размещенные элементы отображаются "по порядку", даже если это оставляет пустоты, которые могли бы быть заполнены более поздними элементами.
row
column
row dense
column dense
Настройки элемента
Выберите любой вложенный элемент для настройки...
width
?
Ширина текущего блока внутри grid-контейнера. Используйте значение auto для установки автоматического значения (браузер вычисляет ширину элемента самостоятельно).
height
?
Высота текущего блока внутри grid-контейнера. Используйте значение auto для установки автоматического значения (браузер вычисляет высоту элемента самостоятельно).
margin
?
Устанавливает величину внешнего отступа от каждого края элемента в одном объявлении.
padding
?
Устанавливает величину внутреннего отступа от каждого края элемента в одном объявлении.
order
?
Устанавливает порядок следования элемента сетки в контейнере относительно остальных.значение не будет являться его порядковым номером , а
указывает только на "вес" его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1 , например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0 .
align-self
?
Производит выравнивание элемента макета сетки внутри ячейки по оси столбца grid-контейнера. Свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу. Возможные значения:
auto - элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch . Это значение по умолчанию. stretch - элемент растягивается по размеру строки контейнера вдоль поперечной оси.center - элемент располагается по центру строки контейнера (середина поперечной оси).flex-start - элемент располагается в начале строки контейнера (начало поперечной оси).flex-end - элемент располагается в конце строки контейнера (конец поперечной оси).baseline - элемент распологается по его базовой линии строки контейнера.
auto
stretch
center
flex-start
flex-end
baseline
justify-self
?
Производит выравнивание элемента макета сетки внутри ячейки по оси строки grid-контенера. Свойство justify-self переопределяет значение выравнивания, заданного для grid-контейнера свойством justify-items конкретному элементу. Возможные значения:
auto - элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch . Это значение по умолчанию. stretch - элемент растягивается по размеру столбца ячейки контейнера.center - элемент располагается по центру столбца ячейки контейнера.flex-start - элемент располагается по начальному краю ячейки. Допускается указывать значение start .flex-end - элемент располагается по конечному краю ячейки. Допускается указывать значение end .baseline - элемент распологается по его базовой линии.
auto
stretch
center
flex-start
flex-end
baseline
place-self
?
Производит выравнивание элемента макета сетки внутри ячейки по оси столбца и по оси строки grid-контенера. Является сокращенным свойством для свойств align-self и justify-self .
auto
stretch
center
flex-start
flex-end
baseline
auto
stretch
center
flex-start
flex-end
baseline
grid-column-end
?
Определяет сколько столбцов будет занимать элемент, или на какой строке столбца завершится элемент. Возможные значения:
auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1 ). Это значение по умолчанию. line - целое число , которое соответствует конечной грани элемента в макете сетки (отсчет граней в макете ведется слева направо от левого края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо. line-name - строковое значение ссылающееся на именованный столбец в макете сетки. Элемент располагается до начальной грани указанного элемента.span line - ключевое слово span с целым числом , которое определяет какое количество столбцов сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1 . Отрицательные значения или значение 0 недопустимы.
grid-row-start
?
Определяет сколько строк будет занимать элемент, или на какой строке начинается элемент в макете сетки. Возможные значения:
auto - ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1 ). Это значение по умолчанию. line - целое число , которое соответствует начальной грани элемента в макете сетки (отсчет граней в макете ведется сверху вниз от верхнего края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.line-name - строковое значение ссылающееся на именованную строку в макете сетки. Элемент располагается от начальной грани указанного элемента.span line - ключевое слово span с целым числом , которое определяет какое количество строк сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1 . Отрицательные значения или значение 0 недопустимы.
grid-row-end
?
Определяет сколько строк будет занимать элемент, или на какой строке заканчивается элемент в макете сетки. Возможные значения:
auto - Ключевое слово, указывающее, что свойство не влияет на размещение элемента в макете сетки (автоматическое размещение, автоматический диапазон или диапазон по умолчанию равный 1 ). Это значение по умолчанию. line - Целое число , которое соответствует конечной грани элемента в макете сетки (отсчет граней в макете ведется сверху вниз от верхнего края элемента, схематичное отображение вверху страницы). Если задано отрицательное целое число, то отсчет ведется в обратном порядке, начиная с конечного края явной сетки макета. Значение 0 недопустимо.line-name - Строковое значение ссылающееся на именованную строку в макете сетки. Элемент располагается до начальной грани указанного элемента.span line - Ключевое слово span с целым числом , которое определяет какое количество строк сетки элемент будет охватывать. Если целое число опущено, то по умолчанию используется значение 1 . Отрицательные значения или значение 0 недопустимы.