Полное руководство по CSS Grid Layout

внешний интерфейс CSS
Полное руководство по CSS Grid Layout

Все хитрости и хитрости только в пределах квадратного сантиметра.

Почти сразу же, как только мы вошли в область фронтенд-разработки, мы постоянно сталкивались с различными методами компоновки. От обычного плавающего макета до табличного макета и популярного ныне гибкого макета технология макета CSS постоянно совершенствуется. Среди них грид-макет (grid), как продукт css3, ближе к стратегии компоновки, используемой веб-дизайнерами.Изучение и правильное использование этого может избавить нас от множества проблем с компоновкой.

Хотя грид-макет имеет много преимуществ, его нелегко освоить. Причина в том, что слишком много свойств для настройки макета, среди них 17 свойств, которые действуют только на родительский контейнер, плюс 10 свойств для дочерних элементов. , и существуют разные способы получения значений этих атрибутов. Это определенно не маленькая нагрузка на память. Так как же за короткий промежуток времени усвоить так много атрибутов и способов их использования? В следующей статье я поделюсь своими эксклюзивными стратегиями обучения этим 27 атрибутам и их соответствующему использованию, надеясь помочь всем в их обучении.

Способ компоновки

Как язык дизайна макета веб-страницы, основные идеи дизайна CSS должны соответствовать соответствующим знаниям предметной области. Макет сетки представляет собой двумерную структуру макета,Рамочная структура макета, образованная двумя наборами линий сетки, которые пересекаются по вертикали и горизонтали.. Веб-дизайнеры могут использовать эти рамки, образованные строками и столбцами, для размещения элементов дизайна. При определении структуры макета сетки нам необходимо описать структуру основного фрейма, которая будет размещена в родительском контейнере. Чтобы описать эту структуру, нам нужно назвать ее основные элементы. Элементы макета сетки можно обобщить в следующих понятиях:

  • строка строки: строка строки
  • строка столбца: строка столбца
  • дорожка: дорожка сетки, то есть область, образованная между линиями строк и линиями строк или линиями столбцов и линиями столбцов, используемая для размещения дочерних элементов.
  • зазор: интервал сетки, линии строк и линии строк или неиспользуемая область, образованная между линиями столбцов и линиями столбцов, используемая для разделения элементов.
  • ячейка: ячейка сетки, область, разделенная строками и столбцами, используемая для размещения дочерних элементов.
  • область: область сетки, состоящая из одной или нескольких ячеек сетки, используемая для размещения дочерних элементов
    grid基本概念

Помня об этих концепциях, вы сможете в дальнейшем освоить и применить сетку.

метод строительства

Чтобы овладеть техникой, необходимо найти самые основные процедуры, а затем продолжить практиковать, чтобы сократить время на принятие решений в последующем процессе практики. Таким образом, эта часть в основном знакомит с некоторыми общими процедурами в процессе построения макета сетки. Проблема, которую мы хотим здесь решить, заключается в том, как использовать самые основные правила для построения идеальной модели макета. В процессе компоновки есть два элемента страницы, с которыми необходимо разобраться в окончательном анализе:Родительский контейнер и дочерние элементы. Первый в основном используется для установки базовой структуры макета, которая эквивалентна плану дизайна в здании, а второй используется для внесения индивидуальных корректировок макета. Поэтому лично я резюмирую рутину в процессе использования макета сетки: установка родительского элемента-контейнера требует трех шагов:Кадрирование, интервал и выравнивание, есть два шага для дочерних элементов:Позиционирование и выравнивание. Я называю их все вместе «Метод построения 32».

В этом разделе я сосредоточусь на объяснении имен всех 27 атрибутов, используемых в макете сетки, а логика значений будет представлена ​​в последней части.

родительский контейнер

Рамка

Первым шагом в настройке макета сетки родительского контейнера является установка блочной модели родительского контейнера наgrid, который запускает алгоритм компоновки сетки механизма рендеринга.

.parent {
	display: grid;
}

Затем нам нужно приступить к подготовке **«рисованию линии»**, то есть к установке базовой линии для нужной строки и столбца. Эти линии сформируют основной шаблон для нашего следующего макета. В процессе рисования линии нам нужно установить ее в соответствии с двумя измерениями строки (строки) и столбца (столбца). Вам нужно нарисовать несколько линий, просто задайте несколько значений (исключая границы), значением которых является размер дорожки. Здесь я сначала рисую рамку сетки 3x3, код выглядит следующим образом:

.parent {
	display: grid;
	grid-template-rows: 100px 100px 100px;
	grid-template-columns: 100px 100px 100px;
}

Здесь вы также можете использовать сокращенную форму для установки значений как для строк, так и для столбцов, используя/Отдельный:

.parent {
	display: grid;
	grid-template: 100px 100px 100px / 100px 100px 100px;
}

image.png

После рисования линий мы можем выбрать имя области сетки (области), образованной между этими линиями и линиями на следующем шаге, чтобы эти имена можно было использовать непосредственно в последующем использовании для облегчения позиционирования подэлементов.

.parent {
	display: grid;
	grid-template-areas: "a a b"
	                     "c d e"
	                     "c d ."
}

Вышеупомянутые два шага рисования линии и именования также могут быть заданы в сокращенной форме.Код выглядит следующим образом:

.parent {
  	display: grid;
  	grid-template: "a a b" 101px
  	               "c d e" 102px
  	               "c d ." 103px / 104px 105px 105px
}

потому что использоватьgrid-templateОдновременно задать названия строки, столбца и области сложнее, для удобства пояснения я установил значение в обычное возрастающее число. в(101, 102,103)установленgrid-template-rowsзначение, в то время как(104,105,106)установленgrid-template-columnsзначение .

image.png

На данный момент можно сказать, что более половины необходимой работы сделано.

установить интервал

Установка промежутка (gap) не является обязательной в реальной разработке и в основном определяется потребностями дизайна веб-страницы. Если вам нужно установить интервал между линиями сетки, мы можем установить его отдельно в двух измерениях строки и столбца, следующий код установит интервал 10 пикселей для каждой строки и столбца:

.parent {
	display: grid;
	grid-template: 100px 100px 100px / 100px 100px 100px;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
}

В сокращенной форме приведенный выше код можно упростить до:

.parent {
	display: grid;
	grid-template: 100px 100px 100px / 100px 100px 100px;
	grid-gap: 10px 10px;
}

Эффект после настройки следующий:

найти выравнивание

С первыми двумя шагами наша структура макета сетки в основном построена. Каждый дочерний элемент по умолчанию занимает область сетки. В родительском контейнере, если он нам нужен, мы должны выполнить последний шаг: найти выравнивание. Так называемое выравнивание можно разделить навнутри и снаружиОба (первый относится к подэлементам каждой области сетки, а второй относится к самой области сетки). Также вСтроки и столбцы(Более профессиональный термин — главная ось и поперечная ось), и в каждом из них есть два измерения, что составляет 4 способа установки выравнивания.

Давайте сначала разберемся с выравниванием каждого дочернего элемента относительно внутренней части области сетки:

.parent {
	display: grid;
	grid-template: 100px 100px 100px / 100px 100px 100px;
	grid-gap: 10px 10px;
	justify-items: center;
	align-items: center;
}

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

image.png

Давайте рассмотрим другую ситуацию:

.parent {
	display: grid;
	width: 500px;
	height: 500px;
	grid-template: 100px 100px 100px / 100px 100px 100px;
	grid-gap: 10px 10px;
	justify-content: space-between;
	align-content: center;
}

Иногда установленной нами сетки недостаточно, чтобы покрыть размер всего родительского контейнера. Например, в приведенном выше примере весь родительский контейнер имеет500px*500pxразмер, и мы только установить300px*300pxВ этом случае необходимо указать правила обработки дополнительного пространства.justify-contentиalign-contentЭто атрибут, используемый для решения этой проблемы в направлении строки и столбца соответственно. Они будут устанавливать свое выравнивание в пределах родительского контейнера для каждой области сетки.

image.png

justifyиalignЭти два слова легко спутать по направлению, поэтому способ, которым я пользуюсь в памяти, это помнитьjustifyrowиaligncolumnЭти два объединенных слова имеют примерно одинаковую длину. Если у вас есть лучший способ запомнить, пожалуйста, оставьте сообщение и дайте мне знать.

дочерний элемент

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

должность

Как и при игре в шахматы, для расположения подэлементов нам нужно назначить им определенные позиции для размещения. Для определения точного местоположения можно использовать ранее указанный в родительском контейнереимя линиииназвание областинайти. Один из способов — прямо указать область, в которой должен быть размещен дочерний элемент, задав начальную строку, конечную строку, начальный столбец и конечный столбец, а другой способ — указать имя области, которую нужно разместить.

/* 指定起始行,结束行,起始列,结束列 */
.child:first-child {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    background: red;
}

/* 使用缩写形式 */
.child:nth-child(2) {
	grid-row: 2/3;
	grid-column: 2/4;
	background: yellow;
}

/* 直接指定区域名 */
.child:nth-child(3) {
	grid-area: i;
	background: green;
}

Эффект от этого кода следующий:

image.png

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

.child-nth-child(3) {
  grid-row: 2/3;
  grid-column: span 2;
}

найти выравнивание

Подобно набору выравнивания в родительском контейнере, для обработки выравнивания отдельных дочерних элементов мы можем обрабатывать их отдельно в соответствии с двумя наборами атрибутов строки и столбца:

/* 列对齐 */
.child:nth-child(1) {
  align-self: end;
}

/* 行对齐 */
.child:nth-child(2) {
  justify-self: end;
}

/* 采用缩写形式 */
.child:nth-child(3) {
  place-self: center center;
}

image.png

*Неявная сетка

Гибкость является основным преимуществом макета сетки.Помимо вышеописанного ручного метода указания структуры фрейма, макет сетки также имеет набор механизмов автоматического макета, который называется «неявный макет сетки»**. Алгоритм компоновки автоматически генерирует неявную сетку, когда мы размещаем дочерние элементы за пределами области, определенной сеткой, или когда элементов-факторов слишком много и требуется больше линий сетки. По умолчанию размер этих неявных сеток также зависит от размера содержимого, и мы можем воспользоваться свойствомgrid-auto-rowsиgrid-auto-columnsдля управления размером неявной сетки. Рассмотрим следующий пример:

<div class="parent">
  <div class="child" style="background: red"></div>
  <div class="child" style="background: yellow"></div>
  <div class="child" style="background: green"></div>
</div>
.parent {
  display: grid;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}

После ручной установки неявного размера сетки в родительском контейнере на размер 100x100 эффект выглядит следующим образом:

image.png
Если дочерние элементы ссылаются на несуществующие номера строк и столбцов, родительский контейнер автоматически генерирует неявную сетку для размещения всех дочерних элементов:

.child:first-child {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    background: red;
}

image.png

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

.parent {
  display: grid;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
  grid-template-areas: "a b c" "d e f" "g h i";
  grid-auto-flow: column;
}

image.png

Искусство ценить

После представления всех свойств макета сетки, давайте поговорим о стратегии значения различных свойств.

размер

В CSS мы обычно используем px, em и другие единицы измерения для установки размера свойства.Для гибких требований к макету процент также является часто используемой единицей измерения. Этих единиц вроде бы достаточно для нормальной работы. Однако, чтобы сделать макет более гибким, в макете сетки был введен новый блок.fr, что является аббревиатурой слова «фракция», что означает дробное соотношение оставшегося места в контейнере. Рассмотрим следующий пример:

.parent {
  height: 100px;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

Мы установили100px 1fr 100pxСтруктура макета, позволяющая легко добиться эффекта фиксированной ширины с обеих сторон и самоадаптирующегося эффекта посередине.

image.png

Если вы хотите добиться пропорциональной структуры макета, вы также можете использовать несколькоfrЗначение:

.parent {
  width: 400px;
  height: 100px;
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-areas: "a b c"
}

Можно видеть, что пропорциональные отношения между областями a, b и c представляют собой отношения «1:1:2».

image.png

В дополнение к вышеупомянутому адаптивному блоку, макет сетки также может использоватьmax-contentиmin-contentЭтот набор ключевых слов используется для адаптивных целей. Чтобы понять эти два ключевых слова, вам сначала нужно понять концепции внутреннего размера и внешнего размера. Скажи это первымextrinsic size, его относительное значение вычисляется относительно значения свойства, соответствующего родительскому контейнеру. мы знаем,widthЕсли используется процентная единица, вычисленное значение относится к ширине контейнера, в котором находится элемент, например, ширина родительского контейнера составляет 100 пикселей, а дочерний элемент установленwidth: 20%, то его ширина100px * 20% = 20px. Представлено в css3intrinsic sizeОн рассчитывается относительно размера самого элемента.max-contentиmin-contentЭто значение атрибута, которое вычисляется относительно собственного блока содержимого элемента.

min-contentКак следует из названия, это минимальная ширина, устанавливаемая в соответствии с содержимым элемента.В английских предложениях это обычно длина самого длинного слова, а в китайском — длина слова. Например следующий пример:

.parent {
  display: grid;
  grid-template-columns: auto min-content auto;
}

image.png

Как видите, ширина сетки посередине равнаscq000длина слова.

иmin-contentСоответствующий,max-contentУстанавливает размер на максимальную ширину, которой может достичь размер содержимого. Давайте изменим код на следующий:

.parent {
  display: grid;
  grid-template-columns: auto max-content auto;
}

image.png

С помощью этих двух значений свойств мы можем легко адаптировать область макета к содержимому.

функция

Функции — это эффективный инструмент, позволяющий избежать повторяющейся работы. Для облегчения нашей работы некоторые общие функции CSS представлены в виде сетки.

Первое, что нужно представить, этоminmaxэта функция. В процессе настройки рамки сетки мы установим минимальное и максимальное значение области адаптивной сетки, и эта функция используется для достижения этой цели.

.parent {
    display: grid;
    grid-template-columns: 100px minmax(100px, 200px) 100px;
}

/* 最常用的情况是只设置最小,不设置最大值 */
.parent {
    display: grid;
    grid-template-columns: 100px minmax(100px, auto) 100px;
}

Макет сетки, установленный этой функцией, может быть хорошо адаптирован, а также может быть обеспечена стабильность макета в процессе масштабирования страницы.

Еще одна полезная функцияfit-content, это на самом делеmin(maximum size, max(minimum size, argument))Сокращение для уменьшения ширины элемента до ширины содержимого. Проще говоря, после использования этой функции она постарается не занимать лишнее место. Если ширина содержимого меньшеfit-content, то фактическая ширина дочернего элемента равна ширине содержимого. Если ширина содержимого превышаетfit-contentДлина установлена, тогда фактическая ширина дочернего элемента равна установленной длине. Вот два примера:

.parent {
    display: grid;
    grid-template-rows: auto fit-content(200px) auto;
}

image.png

image.png

Длина в первом предложении превышает 200 пикселей, поэтому ширина средней сетки составляет 200 пикселей. Во втором примере ширина содержимого меньше 200 пикселей, а ширина средней сетки — это ширина, фактически занимаемая предложением.

Последнее, что нужно представить, этоrepeatФункция, которая в основном используется для установки интервала кадров в пакетах.Эта функция принимает два параметра, первый параметр управляет количеством циклов, а второй параметр управляет размером интервала. Давайте перепишем приведенный выше пример с помощью этой функции:

.parent {
	display: grid;
	grid-template-rows: 100px 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
/* 利用repeat函数改写 */
.parent {
	display: grid;
	grid-template-rows: repeat(3, 100px);
	grid-template-columns: repeat(3, 100px);
}

Кроме того, первый параметр можно использовать в дополнение к настройке количества сеток с помощью цифрового дисплея.auto-fitиauto-fillОба ключевых слова автоматически выделяют место. Обычно эти два ключевых слова имеют схожие эффекты, разница только в правилах выделения свободного места. совпадениеminmaxФункция может увидеть разницу, как в следующих двух примерах:

.parent {
	display: grid;
	width: 500px;
	height: 100px;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.parent {
	display: grid;
	width: 500px;
	height: 100px;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

auto-fit

image.png

В однострочной раскладке, если есть свободное местоauto-fitраспределит их поровну между всеми дочерними элементами, аauto-fillПустые столбцы создаются автоматически.

название

Когда мы создаем структуру макета сетки, мы указываем базовую структуру макета, «рисуя линии». По умолчанию макет сетки называет каждую линию сетки в том же порядке, в котором она написана: нумерация слева направо, сверху вниз. Предположим, мы указываем структуру макета сетки 3x3, тогда, включая линии границ, будет сгенерировано 4+4=8 линий.

image.png
Помимо использования метода именования по умолчанию, мы также можем настроить имя линии сетки для последующего использования в позиционировании подэлементов.

.parent {
  display: grid;
  grid-template-rows: [row-a] 100px [row-b] 100px [row-c] 100px [row-d];
}

выровнять

Выравнивание — обязательный шаг в процессе компоновки, и его значение определяется существующими ключевыми словами. Среди ключевых слов, используемых для выравнивания в макете сетки,start,center, endиstretchчетыре. Начнем со значения по умолчаниюstretchКажется, что это ключевое слово означает растягивание, поэтому по умолчанию дочерние элементы в сетке будут максимально заполнять область сетки.Поскольку это значение по умолчанию, вряд ли при написании кода будет использоваться это ключевое слово для объявления. Давайте взглянем на часто используемые стратегии выравнивания значений, только запомните одну вещь:с атрибутамиjustify-*,align-*для управления двумя направлениями горизонтальной оси и вертикальной оси соответственно, а значение атрибута управляет его положением выравнивания. start,centerиendТри значения атрибута соответствуют前中后три положения.

.parent {
  display: grid;
}
.child:first-child {
  justify-self: start;
}
.child:first-child {
  justify-self: center;
}
.child:first-child {
  justify-self: end;
}

*расположение

Вернемся к неявной части сетки, неявное правило расположения задается указаниемgrid-auto-flowустановите это свойство. имеет только три значенияrow,columnиdense. Раздел свойств выше был введенrowиcolumnДва значения атрибута, первое из которых предназначено для размещения подэлементов с приоритетом строки, а второе — для размещения подэлементов с приоритетом столбца. Вот основное введениеdenseэто значение свойства. Обычно при размещении дочерних элементов строка или столбец заполняются по порядку, а если места недостаточно, то строка или столбец переносится. и используетсяdenseПосле атрибута свободное место будет использоваться максимально, рассмотрим следующий код:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 100px);
}
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

По умолчанию дисплей выглядит так:

image.png

когда мы используемdenseКогда значения расставлены, это равносильно включению «компактного» режима, который будет максимально использовать свободное пространство.

.parent {
	display: grid;
	grid-auto-flow: row dense;
	/* 由于默认为按行排列,可省略为dense */
	grid-auto-flow: dense;
}

Таким образом, эффект отображения выглядит следующим образом:

image.png

Суммировать

В этой статье, разбирая и классифицируя все точки знаний, связанные с компоновкой сетки, я надеюсь предоставить вам более систематический метод руководства по использованию компоновки сетки. В реальном процессе подачи заявки следование процедуре «32 метода построения» может сэкономить много времени на размышления и принятие решений. Кроме того, поскольку информационная плотность этой статьи может быть относительно большой, я надеюсь, что каждый сможет просмотреть ее много раз и попрактиковаться несколько раз на примере, чтобы ее можно было использовать в практической работе. Наконец, отправьте ментальную карту, чтобы помочь каждому получить представление обо всех ключевых моментах этой статьи.

image.png

Рекомендуемое чтение

grid.malven.co/

Woohoo. Я 3.org/TR/CSS-aliga…

medium.com/@Сам Патрик О…

у-у-у-у. palms.com/WordPress/2…

CSS-tricks.com/difference-…

Инструменты отладки чертежей:woohoo. Mozilla.org/en-US/fire F…

——Данная статья впервые опубликована в личном паблике, просьба указывать источник для перепечатки——

微信扫描二维码,关注我的公众号
Наконец, приглашаю всех обратить внимание на мой официальный аккаунт и вместе учиться и общаться.