На прошлой неделе я написалГибкие темыВходит в «Еженедельный выпуск 48» Руан Ифэн, а затемскладТолько что попал на GitHub Trending подкатегории (трафик ужасный 😅).
На этот раз это тема Grid, дополняющая тему Flex. По совпадению, Ruan Yifeng также выпустила его вчера.Учебное пособие по макету сетки, вы можете переключиться, чтобы увидеть это (я думаю, что мое письмо лучше, я не принимаю опровержение 🤔).
Эта статья является одной из серии статей на тему "Подкова·Сетка", и в будущем будет создано больше тем.
Адрес GitHub (постоянно обновляется):horseshoe
Адрес блога (вёрстка статьи очень красивая):matiji.cn
Если вы считаете, что это полезно для вас, пожалуйста, зайдите на GitHub, чтобы отметить, или зайдите в мой блог и расскажите мне лично
Grid LayoutЭто называется моделью компоновки сетки, потому что почти каждый зрелый фреймворк CSS будет реализовывать свою собственную систему компоновки сетки, поэтому W3C просто получил набор собственной системы компоновки сетки CSS, чтобы компенсировать недостатки в этом отношении.
Какое-то время веб-верстка была миром таблиц. Использование макета таблицы странно, но у таблицы есть свои преимущества. Потоковая верстка может стекать только один элемент в низ страницы, и его выразительные возможности ограничены, в то время как таблица разрезает страницу на несколько кусочков тофу, которые можно спокойно распределить по каждому кусочку тофу, а возможность выражения верстки является мгновенным.流. Тем не менее, форма все-таки имеет некоторые особенности для подготовки к выпуску формы, поэтому постепенно она будет легкой.
Систему компоновки сетки можно понимать как более общую и мощную систему компоновки таблиц. Он также разрезает страницу на несколько блоков тофу, и элементы могут свободно объявлять, какой блок тофу занят. W3C такжеGrid LayoutБыло добавлено множество специальных свойств, синтаксиса и функций расчета.Можно сказать, что на этот раз раз и навсегда.
2D макет макета
Ранее мы упоминали, что Flexbox — это одномерная модель макета, подробнее см.:Гибкие темы.
О чем эта темаGrid LayoutОн относится к двухмерной модели макета.
Когда наша перспектива установлена, так называемая одномерность означает, что есть только строки, а так называемая двумерность означает, что есть строки и столбцы. Хорошо известно, что, поскольку это сетка, размер сетки должен определяться пересечением строк и столбцов.
концепция
потому чтоGrid LayoutЭто двухмерная модель макета, которая просто фиксирует направление строк и столбцов. Ну, любую горизонтальную раскладку можно реализовать с помощью вертикальной раскладки и наоборот. Таким образом, направление пользовательского шпинделя не имеет большого значения, поэтомуGrid LayoutНет понятия главной оси и поперечной оси.
Grid LayoutЕдинственными свойствами, включающими пользовательскую ориентацию, являютсяgrid-auto-flow, что означает, что когда сетка явно не объявляет положение, как определить направление порядка расположения, независимо от того, расположены ли они в столбцах или строках. Это свойство будет подробно рассмотрено позже.
Контейнеры и проекты
Grid LayoutЕсть грид-контейнер, который отвечает за разделение территории, а элементы в контейнере будут сдаваться грид-модели;Grid LayoutСуществуют также элементы сетки, которые являются объектами, которые должны быть ограничены моделью сетки.
линии сетки
Линию сетки можно понимать как границу сетки, а пересечение горизонтальных и вертикальных линий сетки образует ячейку сетки. Что делают линии сетки? Некоторые элементы сетки могут занимать более одной ячейки сетки. При объявлении вы можете сказать我从第几条栅格线开始，到第几条栅格线结束，这块区域是老子的.
Вы можете назвать линии сетки.
ячейка сетки
Наименьшая область, ограниченная четырьмя линиями сетки, является ячейкой сетки. Это то, что мы часто называем сеткой.
нужно особое отличие
栅格单元а также栅格项目.Если модель сетки аналогична свиноферме, ячейка сетки — это свинарник, а элемент сетки — свинья. Но свиньи здесь дороже, а свинарник может вырастить максимум одну свинью. Это просто редька и косточка.
Но некоторые свиньи толще или более властны, и они могут занимать более одного загона.
Ячейки сетки — это сетки, элементы сетки — это элементы, иногда для ограничения элемента требуется только одна сетка, а иногда для ограничения элемента требуется несколько сеток.
Ненумерованные ячейки сетки
Количество ячеек сетки должно быть объявлено явно. Если количество элементов сетки превышает заявленное количество ячеек сетки,Grid LayoutАвтоматически создается несколько ячеек сетки, чтобы обернуть эти лишние элементы сетки.
Мы называем это ячейкой внештатной сетки.
Ненумерованные ячейки сетки имеют свои свойства, которые можно изменить.grid-auto-columns,grid-auto-rowsа такжеgrid-auto-flowнастроить.
система сетки
Сеточная система — это просто сумма ячеек сетки.
Сеточная система и грид-контейнер — это разные понятия, так же как ячейка сетки и элемент сетки — разные понятия.
Система сетки может переполнять контейнер сетки, может быть смещена в угол контейнера сетки или может заполнять контейнер сетки.
сетка трек
Возвращаясь к двухмерной модели компоновки, хотя мы и говорим, что в ней есть строки и столбцы, преимущества различения строк и столбцов невелики, поэтому они называются дорожками сетки.
Область, ограниченная двумя соседними линиями сетки и контейнером сетки, является дорожкой сетки.
область сетки
Любая область, ограниченная четырьмя линиями сетки, может стать областью сетки. Когда для ограничения элемента требуется несколько сеток, мы говорим, что элементу нужна область сетки для его ограничения.
Область сетки может состоять из одной единицы сетки или нескольких единиц сетки, но она должна быть прямоугольной.
Или вы можете показать мне некубоид с двумя горизонтальными линиями и двумя вертикальными линиями?
Область сетки в конечном итоге используется элементом сетки. Вы можете назвать область сетки, элемент сетки объявляет область именем или элемент сетки непосредственно определяет область с четырьмя линиями сетки.
display
Отсюда мы поговорим о конкретных свойствах CSS.
Это свойство объявляет тип контейнера сетки.
.container {
display: grid | inline-grid | subgrid;
}
Разница между первыми двумя значениями свойств заключается в том, должен ли сам контейнер вести себя как блочный элемент или как встроенный элемент. Третье значение атрибута принадлежитCSS Grid Level 2Спецификация в настоящее время (март 2019 г.) все еще находится на стадии проекта и не указана.
grid-template-[columns|rows]
Эти два свойства определяют количество и ширину дорожек сетки.
Когда вы объявляете четыре ширины, в этом направлении есть четыре дорожки, и их ширины — это объявленные вами значения.
Вы также можете объявить имена линий сетки одновременно с объявлением дорожек сетки. Порядок — это их физический порядок.
.container {
grid-template-columns: <length> <length> | <line-name> <length> <line-name> <length> <line-name>;
grid-template-rows: <length> <length> | <line-name> <length> <line-name> <length> <line-name>;
}
любые применимыеwidthЗдесь применимы значения .
auto
Если значение растровой дорожки равноauto, который по умолчанию заполняет свободное пространство контейнера сетки.
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
.item.b {
width: 100px;
}
Но если объявленоjustify-content(будет описано позже) нетstretch,Этоautoбудет зависеть от длины элементов сетки.
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
justify-content: start;
}
.item.b {
width: 50px;
}
Это нетрудно понять. По аналогии, обычные блочные элементы будут занимать дополнительное место в строке, а блочные элементы с абсолютным позиционированием будут принимать ширину самих себя или своих дочерних элементов в качестве своей ширины.autoПроизводительность здесь такая же.
fr
frдаfractionАббревиатура в переводе на китайский язык分数, дробь дроби. этоGrid LayoutВыделенная единица длины.
Его формула расчета такова: сначала вычтите не-frДлина агрегата, с учетом оголовка как общая длина, с заявленнойfrСумма количеств является знаменателем, с самопровозглашеннымfrЧисло – это молекула, и получается занимаемая ею длина.
.container {
display: grid;
grid-template-columns: 100px repeat(2, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
Почему W3C добавляет такую единицу? не иметь%Какой?
ответ富余空间начальство.frЭто тоже процент, но он может гарантировать, что общая длина не превысит длину контейнера сетки, потому что он делит длину свободного пространства; и%Что делится, так это длина сетки-контейнера, неважно, кто еще покроется инеем.
Например, как в примере выше, используйте%Вы должны сделать математику, используйтеfrГораздо проще.
minmax()
minmax()даGrid LayoutСпециальные функции расчета.
.container {
display: grid;
grid-template-columns: minmax(100px, 200px) 300px 300px;
}
Он имеет два параметра: минимальное и максимальное значения. Когда ячейку сетки необходимо сжать, минимальное значение — это минимальный предел сжимаемого элемента сетки, а когда в ячейке сетки остается свободное место, максимальное значение — это максимальный предел расширения элемента сетки.
У него есть еще несколько значений, заслуживающих особого упоминания.
- max-content: его значение — естественная длина текста в элементах сетки без переноса.
- min-content: его значение представляет собой естественную длину переноса всего текста в элементе сетки.
- auto: его значение находится между min-content и max-content в зависимости от сцены.
fit-content()
fit-content()СлишкомGrid LayoutСпециальные функции расчета.
Он принимает аргумент единиц длины.
.container {
display: grid;
grid-template-columns: repeat(3, fit-content(200px));
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
мы уже знаемmin-contentа такжеmax-content.
fit-content()С точки зрения формулы расчета минимальное значение составляет содержаниеmin-content, в качестве параметра берется максимальное значение иmax-contentМеньший. Например, в приведенном выше примере, когда содержимое меньше200pxКогда содержимое равно длине, когда содержимое больше, чем200pxкогда, с200pxэто длина.
repeat()
repeat()даGrid LayoutСпециальная функция повтора.
Он принимает два параметра: первый — это количество повторений, а второй — ширина дорожки сетки.
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
Второй параметр может быть больше, чем просто ширина, это может быть шаблон. Например[col-start] 100px [col-end] auto, который повторяет весь абзац несколько раз, а квадратные скобки используются для обозначения линий сетки.
Таким образом, первая, третья и пятая линии сетки называютсяcol-start, вторая, четвертая и шестая линии сетки называютсяcol-end. Короче говоря, использование функции повтора для именования линий сетки будет иметь много повторяющихся имен.
Кроме того, второй параметр также может бытьminmaxфункция,fit-contentфункция илиmin-content,max-content,autoключевые слова.
.container {
display: grid;
grid-template-columns: repeat(3, [col-start] 100px [col-end] auto);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
Первый параметр также имеет два ключевых словаauto-fillа такжеauto-fit.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
Объясните немного.
auto-fillа такжеauto-fitИх объединяет то, что они гарантируют, что грид-система не переполнит грид-контейнер. Потому что, если вы напишете количество повторений, контейнер сетки будет переполняться только в том случае, если места не хватит.
Разница в том, чтоauto-fillсгенерирует как можно больше растровых дорожек, даже если они кажутся бесполезными;auto-fitГенерирует как можно меньше растровых дорожек, чтобы эти адаптивные растровые ячейки занимали как можно больше места.
Итак, разница в том,auto-fillЧтобы иметь как можно больше дорожек сетки,auto-fitЯ хочу сделать ячейки сетки максимально большими.
Эти два свойстваGrid LayoutМощный инструмент для адаптивной верстки, сохраняются даже медиа-запросы.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Здесь это означает, что при адаптивном макете длина каждого элемента сетки делится поровну, но минимум не меньше300px. Как можно быть уверенным в максимальном?600pxприбыть900pxВ промежутке между ними в линию можно поместить только два предмета, причем не более одного раза.900px, в строке будет три элемента.
grid-template-areas
Это свойство дает имя ячейке сетки, и ячейка сетки с таким именем автоматически становится областью сетки.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
}
Что толку после имени? Растровые элементы имеютgrid-areaатрибут, который разделяет область сетки.
.item {
grid-area: header;
}
Это означает, что имяheaderОбласти сетки все мои, пописай в доказательство.
Формат должен быть гарантирован
использоватьgrid-template-columnsа такжеgrid-template-rowsСколько ячеек сетки объявлено При именовании имена должны быть во взаимно однозначном соответствии с ячейками сетки. И, как упоминалось ранее, область сетки должна быть прямоугольной, поэтому обратите на это внимание, называя их последовательно.
Я не один в один? Например, есть три ячейки сетки по горизонтали, но я объявляю только два имени.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'header header';
}
Или, может быть, я просто не составляю кубоид? Например, первая строка из двухmain, второй ряд триmain.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-template-areas:
'main main avatar'
'main main main';
}
.item.a {
grid-area: main;
}
Если формат неправильный, результат тот же. все объявленоgrid-areaВсе элементы будут в ненумерованной ячейке сетки в правом нижнем углу, перекрывая друг друга, неясно, каков алгоритм или механизм.
На самом деле во втором случае можно считать, что два столбца и четыреmainобразуют одну область, другуюmainПридумай другую область, а? Но если подумать, то есть дваmainНеудобно, когда проект разделен, есть анклав. Формат по-прежнему неправильный.
Так что да, грамматика такая строгая, следуйте ей честно.
имя по умолчанию
Поскольку грамматика очень строгая, вы должны знать, что выбор имени — это головная боль. Очевидно, мне нужно назвать только небольшую область, вы должны заставить меня заполнить ее. Есть ли способ спасти беду?
Конечно, есть. Я использую его, когда не знаю, как он называется.заменять.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'main main sidebar'
'main main .';
}
Мало того, пока нет разделяющих пробелов, n.Оба занимают только одну ячейку сетки.
grid-template-areasТакже есть стоимость недвижимостиnone. Сначала я подумал, что это способ открытия:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'main main sidebar'
'main main none';
}
Оказывается, я фактически объявил функцию с именемnoneобласть сетки.noneдаgrid-template-areasЗначение по умолчанию, фактический метод открытия выглядит следующим образом:
.container {
grid-template-areas: none;
}
То есть оставить в покое.
Связанные неявные объявления
Каждая область сетки окружена четырьмя линиями сетки, которые также неявно названы. По горизонтали соответственноxxx-startа такжеxxx-end, также вертикальноxxx-startа такжеxxx-end. Так или иначе, имя линии сетки многих не пугает, оно боится только темноты, потому что боится певца.
В то же время верно и обратное.
.container {
display: grid;
grid-template-columns: [biu-start] 1fr [nothing] 1fr [biu-end] 1fr [nothing];
grid-template-rows: [biu-start] 1fr [nothing] 1fr [biu-end];
}
Вышеупомянутое будет неявно объявлятьbiuобласть сетки. Выяснилось, что области сетки не могут иметь одинаковые имена, но могут перекрываться.
grid-[column|row]-gap
Это свойство определяет зазор между ячейками сетки.
.container {
grid-column-gap: <length>;
grid-row-gap: <length>;
}
Значение здесь может быть любым определениемwidthценность .
Видно, что еслиgrid-column-gapустановить как80%, это значитgapконтейнера сетки80%, все ячейки сетки могут делить только оставшиеся20%.
еслиgrid-column-gapустановить как100%или более100%Шерстяная ткань? Ширина ячейки сетки не обязательно равна 0, потому что мы говорили об этом в теме Flex,margin,borderа такжеpaddingОн очень жесткий, пока вы определяете его, flex или grid вообще не могут их сжимать.
Особо следует отметить, что,
grid-[column|row]-gapНедоступноfrСтоимость единицы.Не слишком много ролей второго плана.
grid-gap
Это свойство коллекции, которое можно объявить одновременноgrid-column-gapа такжеgrid-row-gap.
.container {
grid-gap: <grid-column-gap> <grid-row-gap>;
}
justify-items
Это свойство определяет выравнивание ячеек сетки относительно вертикальных линий сетки.
.container {
justify-items: stretch(default) | start | end | center;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
justify-items: center;
}
Когда общая ширина ячеек сетки превышает ширину контейнера сетки, вертикальные линии сетки растягиваются и выравнивание отсутствует.
Таким образом, это свойство действует только в том случае, если общая ширина ячеек сетки меньше ширины контейнера сетки.
Аналогичные значения свойств для Flexbox:
flex-startа такжеflex-end, W3C наконец удалил префикс в сетке.
align-items
Это свойство определяет выравнивание ячеек сетки относительно горизонтальных линий сетки.
.container {
align-items: stretch(default) | start | end | center;
}
place-items
Это свойство коллекции, которое можно объявить одновременноalign-itemsа такжеjustify-items.
Если второй параметр опущен, второй параметр принимает первое значение.
.container {
place-items: <align-items> <justify-items>;
}
justify-content
Это свойство объявляет горизонтальное выравнивание системы сетки относительно контейнера сетки.
.container {
justify-content: start(default) | end | center | stretch | space-around | space-between | space-evenly;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
justify-content: center;
}
Если заявленная ширина ячеек сетки не соответствуетautoценность, чтоjustify-contentЗначение по умолчаниюstart, который выровнен по левому краю. В этот моментstretchне работает.
Если есть ячейки сетки, значение ширины равноauto, то по умолчаниюstretch, так что вся сеточная система также становитсяstretch. Конечно вы можетеjustify-contentУстановите другое значение, на этот раз значение ширины равноautoЯчейки сетки принимают ширину дочернего элемента в качестве ширины.
так что я не понимаюjustify-content: stretchКакова роль . Единственный вариант использования — переопределение стиля.
align-content
Это свойство объявляет вертикальное выравнивание системы сетки относительно контейнера сетки.
.container {
align-content: start(default) | end | center | stretch | space-around | space-between | space-evenly;
}
здесь оstretchОбработка такая же.
place-content
Это свойство коллекции, которое можно объявить одновременноalign-contentа такжеjustify-content.
Если второй параметр опущен, второй параметр принимает первое значение.
.container {
place-content: <align-content> <justify-content>;
}
grid-auto-[columns|rows]
Эти два свойства задают высоту и ширину ненумерованных ячеек сетки.
.container {
grid-auto-columns: <length> <length> <length>;
grid-auto-rows: <length> <length> <length>;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
grid-auto-rows: 100px;
height: 300px;
}
Значение по умолчанию для ширины ячеек сетки с превышением числа — auto. То есть, взяв ширину в качестве примера, если ширина контейнера сетки больше ширины системы сетки, ячейка сетки дополнительного размера будет поровну делить ширину дополнительного пространства, в противном случае дополнительный размер ячейка сетки будет принимать ширину содержимого в качестве своей ширины.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
height: 300px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
height: 110px;
}
grid-auto-flow
Это свойство определяет, как элементы сетки должны располагаться по порядку, если элементы сетки не расположены явно внутри контейнера сетки.
Что касается того, что является явно заданной позицией, сам элемент сетки имеет некоторые свойства, которые могут объявлять, какая линия сетки, которую он занимает, начинается и какой линией заканчивается, или прямо объявляет, какую область сетки он занимает. Здесь он не указан, о чем будет сказано позже.
Это свойство немного похоже на Flexboxflex-directionАтрибуты.
.container {
grid-auto-flow: row(default) | column | dense | row dense | column dense;
}
Как подсказывает название,rowрасполагается рядами,columnрасполагается в столбцах.
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
grid-auto-flow: row;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
grid-auto-flow: column;
}
Суть разговора в том,denseэто значение свойства.denseв переводе на китайский есть稠密Это означает, что когда элементы сетки в первом ряду освобождаются по каким-либо причинам (в основном потому, что позиция четко указана, но не заполнена), последние элементы должны быть втиснуты, если они подходят.
Следствием этого является то, что элементы сетки, для которых не указана явная позиция, могут быть не в порядке.
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
.item.c {
grid-column-start: 2;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
grid-auto-flow: dense;
}
.item.c {
grid-column-start: 2;
}
grid
Это свойство коллекции, которое объявляет все значения свойств для любого из двух классов свойств.
.container {
grid: <grid-template-rows> / <grid-template-columns>;
grid: <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}
Значения, начинающиеся с length, объявляют первый класс, начиная сrow,columnилиdenseЦенность начала начала есть второй класс.
с текущимGrid LayoutС точки зрения популярности книги, постарайтесь не писать так, вам тяжело писать, а другим тяжело читать.
grid-[column|row]-[start|end]
Отсюда задействованными свойствами являются свойства самого элемента сетки.
Это свойство объявлено, чтобы указать, где начинаются и заканчиваются элементы сетки.
.item {
grid-column-start: auto(default) | <number> | <name> | span <number> | span <name>;
grid-column-end: auto(default) | <number> | <name> | span <number> | span <name>;
grid-row-start: auto(default) | <number> | <name> | span <number> | span <name>;
grid-row-end: auto(default) | <number> | <name> | span <number> | span <name>;
}
startне обязательноendЕсли вы идете вперед или назад, направление от начала до конца обращается. Например, область, указанная следующими двумя кусками кода, одинакова.
.item {
grid-column-start: 1;
grid-column-end: 3;
}
.item {
grid-column-start: 3;
grid-column-end: 1;
}
Давайте объясним каждое значение атрибута по одному:
-
autoОтносится к занятию только одной ячейки сетки. Неважно, где он начинается или заканчивается, пока есть одинautoзначение, оно занимает только одну ячейку сетки. -
numberОтносится к порядку линий сетки, начиная с 1. -
nameОтносится к имени линии сетки. Имена линий сетки могут происходить из двух мест, первое — черезgrid-template-[columns|rows]покажи декларацию, вторая это определениеgrid-template-areasв то же время он будет автоматически сгенерирован для закрытых линий сетки.xxx-startа такжеxxx-endИмя. -
span <number>Относится к пролету. Числа здесь больше не являются первой линией сетки, а охватывают несколько линий сетки. -
span <name>Относится к охвату до указанной линии сетки. это и простоnameкакие отличия есть? еслиstartСравниватьendназад, простоnameСитуация будет такой же, как указано выше, и направление от начала до конца будет противоположным; иspan <name>В случае , он будет оглядываться назад, ведь его нельзя найти, поэтому он перейдет к последней линии сетки. Разница заключается в степени ошарашенности молодежи, верно?
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-template-areas:
'a b c'
'd e f';
grid-gap: 10px;
}
.item.c {
grid-column-start: c-start;
grid-column-end: a-start;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-template-areas:
'a b c'
'd e f';
grid-gap: 10px;
}
.item.c {
grid-column-start: c-start;
grid-column-end: span a-start;
}
grid-[column|row]
Это два свойства коллекции, которые могут объявлять начало и конец в определенном направлении.
.item {
grid-column: <start> / <end>;
grid-row: <start> / <end>;
}
grid-area
Это свойство определяет, какую область сетки занимает элемент сетки.
.item{
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
ранее представленныйgrid-template-areasсвойство, объявляемая им область сетки может использоваться элементами сетки.
Конечно, вы также можете использовать линии сетки, чтобы заключить область сетки, так что это также эквивалентноgrid-[column|row]-[start|end]Конечная коллекционная собственность . Обратите особое внимание на порядок объявлений.
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-template-areas:
'a b c'
'd e f';
grid-gap: 10px;
}
.item.c {
grid-area: a; /* 或者 grid-area: 1 / 1 / 2 / 2; */
}
justify-self
Это свойство определяет, как элементы сетки выравниваются по горизонтали, если их длина меньше длины ячейки сетки.
Его можно использовать для объявления горизонтального выравнивания самого элемента сетки и даже для переопределения контейнера сетки.justify-itemsценность .
.item {
justify-self: stretch(default) | start | end | center;
}
align-self
Это свойство определяет, как элементы сетки выравниваются по вертикали, если высота элементов сетки меньше высоты ячеек сетки.
Он позволяет объявить вертикальное выравнивание самого элемента сетки и даже переопределить контейнер сетки.align-itemsценность .
.item {
align-self: stretch(default) | start | end | center;
}
place-self
Это свойство коллекции, которое можно объявить одновременноalign-selfа такжеjustify-self.
Если второй параметр опущен, второй параметр принимает первое значение.
.item {
place-self: <align-self> <justify-self>;
}
разное
есть небольшая играGrid GardenМожет помочь вам практиковать легкоGrid Layoutразличных характеристик.
Существует также веб-сайтGridByExample, утверждая, что все, что вам нужно знатьGrid LayoutЗнание здесь.
Эта статья является одной из серии статей на тему "Подкова·Сетка", и в будущем будет создано больше тем.
Адрес GitHub (постоянно обновляется):horseshoe
Адрес блога (вёрстка статьи очень красивая):matiji.cn
Если вы считаете, что это полезно для вас, пожалуйста, зайдите на GitHub, чтобы отметить, или зайдите в мой блог и расскажите мне лично