Дом Программирование Насколько я помню свойства CSS Grid

Насколько я помню свойства CSS Grid

Программирование
1656513616 naskolko ya pomnyu svojstva css grid

Синтаксис для CSS Grid чужд и его трудно запомнить. Но если вы не можете упомянуть синтаксис CSS Grid, вы не будете уверены, используя CSS Grid.

Чтобы эффективно использовать CSS Grid, вам нужно помнить его свойства и значение.

Я хочу поделиться, как я помню наиболее распространенные свойства CSS Grid сегодня. Это поможет вам использовать CSS Grid, не жужжа, как маньяк.

Группы свойств

Я помню CSS Grid по четырем группам свойств:

  1. Явная сетка
  2. Пробелы
  3. Выравнивание вещей
  4. Неявная сетка

Явная сетка

Скажем, вы хотите создать сетку из 4 столбцов и 3 строчек. Вы говорите это вслух 4 столбцам и 3 строкам. Это очевидно.

Если вы объявляете количество строк и столбцов в вашей сетке, сетка явна.

Вы можете использовать два свойства, чтобы создать явную сетку:

  1. grid-template-columns
  2. grid-template-rows

grid-template-columns позволяет определить количество столбцов. grid-template-rows позволяет определить количество строк.

.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 3em 3em 3em;}

Это создает сетку с четырьмя столбцами и тремя строчками.

Просмотрите Pen XPyGZp от Zell Liew (@zellwk) на CodePen.

Как вы знаете, что есть четыре столбца и три строчки?

grid-template-columns создайте новый столбец для каждого значения длины, которое вы добавляете в него. В grid-template-columns декларации выше, у нас четыре 1fr ценности. Это означает четыре столбца.

grid-template-rows работать так же. В сетке выше есть три 3em значение, что означает, что он имеет 3 строчки.

grid-template-columns и grid-template-rows также может принимать такие значения, как repeat, autofill, autofit, minmax. В этой статье мы не будем рассматривать эти значения.

Теперь вам нужно знать, что вы можете создать явную сетку с двумя свойствами:

  1. grid-template-columns: создает столбцы
  2. grid-template-rows: создает строки

Размещение элементов в вашей сетке

Вы можете управлять положением элементов в сетке с помощью двух свойств.

Эти два свойства можно использовать только для элемента сетки.

grid-column позволяет выбрать, в какие столбцы вы хотите разместить свой элемент сетки. Это сокращение для grid-column-start и grid-column-end.

Это работает следующим образом: grid-column-start / grid-columns-end.

/* Using the longhand */.grid-item {  grid-column-start: 1;   grid-column-end: 3;}
/* Using the shorthand */.grid-item {  grid-column: 1 / 3;}

Примечание: Вы также можете использовать span ключевое слово, чтобы указать CSS Grid, сколько столбцов вы хотите, чтобы ваш элемент занимал.

/* Using the longhand */.grid-item {  grid-column-start: 1; /* Start at column one */  grid-column-end: span 2; /* Width is two columns */}

Просмотрите свойства Pen Explicit Grid от Zell Liew (@zellwk) на CodePen.

grid-row позволяет выбрать строку для размещения элемента сетки. Это сокращение для grid-row-start и grid-row-end.

Это работает следующим образом: grid-row-start / grid-row-end.

/* Using the longhand */.grid-item {  grid-row-start: 1;   grid-row-end: span 2;}
/* Using the shorthand */.grid-item {  grid-row: 1 / span 2;}

Смотрите элементы размещения пера (строки) от Zell Liew (@zellwk) на CodePen.

Размещение элементов в указанных областях

Вы можете называть части своей сетки, если вам не нравится считать строки и столбцы. Эти именуемые части называются областями сетки. Чтобы создать область сетки, вы используете grid-template-area на сетке.

Некоторые примечания по созданию областей сетки:

  1. Вы должны назвать каждую область сетки
  2. Если вы не хотите называть область, используйте .
  3. Каждая группа отделена обратными запятыми ("row1" "row2") означает ряд
  4. Каждое значение внутри запятой ("area1 area2") означает область

В примере ниже есть три области сетки:

  1. header на первых двух и занимает 4 столбика
  2. main на втором ряду и занимает средние 2 столбика
  3. footer по третьему ряду и занимает 4 столбика
.grid {  grid-template-areas: "header header header header"                      ".      main   main   .     "                      "footer footer footer footer";}

Чтобы разместить элементы в области сетки, вы используете grid-area свойство на элементе сетки.

Чтобы разместить элементы в области сетки, вы используете grid-area.

.grid {  display: grid;   /* ... */}
main {  grid-area: main}

Просмотрите область Pen Grid-template-are от Zell Liew (@zellwk) на CodePen.

Как запомнить эти свойства

Вы узнали о 6 свойствах:

  1. grid-template-columns
  2. grid-template-rows
  3. grid-template-areas
  4. grid-column
  5. grid-row
  6. grid-area

Несколько советов, чтобы запомнить эти 6 свойств:

  1. The template ключевое слово можно использовать только в сетке
    а) Они используются для объявления сеток и именуемых областей
    б) Свойства с template ключевое слово является множеством
  2. Свойства для элементов сетки не обладают template ключевое слово
    а) Эти свойства единичны
    b) Эти свойства влияют на позиционирование

Пробелы

При создании сетки можно создать пробелы между столбцами и строками. Эти пространства называются промежутками.

Необходимо помнить три свойства:

  1. grid-column-gap
  2. grid-row-gap
  3. grid-gap

grid-column-gap определяет пространство между столбцами.

grid-row-gap определяет расстояние между рядами.

grid-gap является сокращением для grid-column-gap и grid-row-gap.

Для этого сокращение:

  1. в column значение на первом месте: column-gap / row-gap
  2. Если вы используете одно число, оба значения будут являться этим числом.
/* Different values */.grid {  grid-column-gap: 1em;  grid-row-gap: 2em;}
.grid {  grid-gap: 1em / 2em; }/* Same values */.grid {  grid-column-gap: 1em;  grid-row-gap: 1em;}
.grid {  grid-gap: 1em;}

Просмотрите явную сетку пера с пробелом от Zell Liew (@zellwk) на CodePen.

Выравнивание вещей

Здесь многие путаются.

Есть шесть свойств для выравнивания вещей:

  1. justify-content
  2. align-content
  3. justify-items
  4. align-items
  5. justify-self
  6. align-self

Здесь вы можете увидеть две группы узоров:

  • Первая группа есть justify против align
  • Вторая группа – это content, itemsи self

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

Выравнивание и выравнивание

Каждая сетка CSS имеет две оси:

  1. Главная ось
  2. Поперечная ось

Когда ты justify что-то, вы изменяете выравнивание в соответствии с главная ось. Когда ты align что-то, вы изменяете выравнивание в соответствии с поперечная ось.

Вот простой способ определить главную и поперечную ось:

  1. Определите направление языка
  2. Главная ось – это способ чтения языка
  3. Поперечная ось – это способ чтения после того, как вы прочли конец первой строки.

Возьмем, например, английский язык. Как ты читаешь на английском?

  1. Слева направо
  2. Сверху вниз

Итак, главная и поперечная ось:

  1. Основное: слева направо
  2. Крест: сверху вниз

Примечание: главная и поперечная оси изменяются, если изменить направление языка с помощью writing-mode.

Содержимое, предметы и себя

justify-content и align-content позволяет выровнять саму сетку за имеющимся пространством за пределами сетки. Эти свойства вам понадобятся, только если ваша сетка меньше определенной площади (редко встречающейся).

.grid {  justify-content: /* some value */;   align-content: /* some value */; }

Вы можете выбрать из семи значений:

  1. начать: сравнить сетку к началу оси
  2. конец: сетка промыта до конца оси.
  3. центр: выровнять сетку по центру оси.
  4. растянуть: сетка заполняет ось (это значение по умолчанию)
  5. пространство между: расширение пробела между элементами сетки. Без пробелов на концах
  6. пространство вокруг: расширяет пробел вокруг каждого элемента сетки.
  7. пространства-равномерно: равномерно распределяет пробелы вокруг всех элементов сетки, включая концы.
Bji3J37rICTz6Njcts4IL6ejCB-Z4Usg6DkH

Изображения выше взяты из полного руководства по гриду CSS Tricks. В нем подробно разъясняется, что делает каждое значение. Вы можете прочесть его для получения дополнительной информации.

Здесь мы сосредотачиваемся на запоминании свойств и способов их использования. Давайте вернемся к следующему набору свойств.

justify-items и align-items позволяет выравнивать элементы сетки по любому доступному пробелу в соответствующих ячейках. В большинстве случаев, когда вы пытаетесь выровнять вещи, вы ищете то и другое justify-items или align-items.

.grid {  justify-items: /* some value */;   align-items: /* some value */; }

Вы можете выбрать из тех же четырех значений:

  1. начать: смойте элемент до начала оси
  2. конец: смойте элемент до конца оси
  3. центр: выровнять элемент по центру оси
  4. растянуть: заполняет ось (это значение по умолчанию)
QsF6-6HHFmOHMEv4utrE0MZd-xelyg5ueVb6

justify-self и align-self делает то же, что justify-items и align-items. Разница в том, что она позволяет изменять выравнивание только одного элемента сетки.

.grid-item {  justify-self: /* some value */;  align-self: /* some value */;}

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

Скажем, вы создали сетку CSS, но у вас недостаточно строчек. В этом примере ниже я создал явную сетку только для трех элементов (3 столбца, 1 строка).

.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr;  grid-template-row: 3em;}

Но у меня шесть предметов!

<!-- This is HTML -->
<div class="grid">  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div>  <div class="grid-item"></div></div>

Если в явной сетке недостаточно места, CSS Grid поможет вам автоматически создать дополнительные сетки. По умолчанию он создаст больше строчек.

Если вы хотите изменить направление сетки, вы установите grid-auto-flow к row.

Эти автоматически созданные части называются неявной сеткой.

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

  1. grid-auto-columns
  2. grid-auto-rows
.grid {  display: grid;   grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 3em;   grid-auto-rows: 6em;}

Просмотрите сетку Pen Implicit от Zell Liew (@zellwk) на CodePen.

Как запомнить неявную сетку

auto это ключевое слово, на которое следует обратить внимание.

  1. template создает явную сетку
  2. auto создает неявную сетку

Я часто использую неявную сетку. Я поделюсь, как я использую CSS Grid, в другой статье.

Подведению

Это почти каждое свойство CSS Grid, которое вы должны знать для 80% ваших сеток! Вот краткое описание свойств, которые вы узнали:

  • Создание сетки
    а. Откровенный:
    1) grid-template-columns
    2) grid-template-rows
    3) grid-template-areas
    б. Неявно:
    1) grid-auto-columns
    2) grid-auto-rows
  • Пробелы
    1) grid-column-gap
    2) grid-row-gap
    3) grid-gap
  • Размещение элементов в сетке
    1) grid-column
    2) grid-row
  • Выравнивание вещей
    1) justify-content
    2) align-content
    3) justify-items
    4) align-items
    5) justify-self
    6) align-self

Надеюсь, это поможет вам упомянуть CSS Grid! Все лучшее!

Спасибо, что прочли. Помогла ли вам эта статья однажды? Если вы сделали, надеюсь, вы поделитесь этим. Вы можете помочь кому-то. Спасибо!

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

Похожие записи:

  1. Ввод в макет сетки CSS (с примерами)
  2. Макет сетки CSS
  3. Изучите CSS Grid, создав 5 макетов за 17 минут.
  4. Как создать галерею изображений с помощью CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован.