greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/russian/css/layout/grid-layout/index.md

9.0 KiB
Raw Blame History

title localeTitle
Grid Layout Макет сетки

Макет сетки

CSS Grid Layout, просто называемый Grid, представляет собой схему компоновки, которая является самой новой и самой мощной в CSS. Он поддерживается всеми основными браузерами и позволяет размещать элементы на странице и перемещать их.

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

Почему сетка?

  • Вы можете легко иметь 12-колонную сетку с одной строкой CSS. grid-template-columns: repeat(12, 1fr)
  • Сетка позволяет перемещать вещи в любом направлении. В отличие от Flex, где вы можете перемещать объекты горизонтально ( flex-direction: row ) или вертикально ( flex-direction: column ) - не одновременно одновременно, сетка позволяет перемещать любой элемент сетки в любую предопределенную область сетки на странице. Перемещаемые предметы не должны быть смежными.
  • С помощью CSS Grid вы можете изменить порядок элементов HTML, используя только CSS . Переместите что-то сверху вниз, переместите элементы, которые были в нижнем колонтитуле, на боковую панель и т. Д. Вместо того, чтобы перемещать <div> с <footer> на <aside> в HTML, вы можете просто изменить его размещение с grid-area в области CSS stylesheet.

Сетка против Flex

  • Flex является одномерным - горизонтальным или вертикальным, а сетка двумерная, то есть вы можете перемещать элементы как в горизонтальной, так и в вертикальной плоскостях
  • В Grid мы применяем стили макета к родительскому контейнеру, а не к элементам. Flex, с другой стороны, нацеливается на элемент flex для установки таких свойств, как flex-basis , flex-grow и flex-shrink
  • Grid и Flex не являются взаимоисключающими. Вы можете использовать оба проекта в одном проекте.

Проверка совместимости браузера с @supports

В идеале, когда вы строите сайт, вы создаете его с помощью Grid и используете Flex как резерв. Вы можете узнать, поддерживает ли ваш браузер сетку с @support CSS @support (например, запрос функции). Вот пример:

.container { 
  display: grid; /* display grid by default */ 
 } 
 
 @supports not (display: grid) { /* if grid is not supported by the browser */ 
  .container { 
    display: flex; /* display flex instead of grid */ 
  } 
 }

Начиная

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

.conatiner { 
  display: grid; 
 }

Вот и все. Вы просто сделали ваш .container сеткой. Каждый элемент внутри .container автоматически становится элементом сетки.

Определение шаблонов

Строки и столбцы

grid-template-columns: 1fr 1fr 1fr 1fr; 
 grid-template-rows: auto 300px;

районы

grid-template-areas: 
  "aaaa" 
  "bcde" 
  "bcde" 
  "ffff";

или

grid-template-areas: 
  "header header header header" 
  "nav main main sidebar";

Сетки

Вот пример кода для определения и назначения областей сетки

.site { 
  display: grid; 
  grid-template-areas: /* applied to grid container */ 
    "head head" /* you're assigning cells to areas by giving the cells an area name */ 
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */ 
    "nav  foot"; 
 } 
 
 .site > header { 
  grid-area: head; 
 } 
 
 .site > nav { 
  grid-area: nav; 
 } 
 
 .site > main { 
    grid-area: main; 
 } 
 
 .site > footer { 
    grid-area: foot; 
 }

Блок fr

Grid представляет новый блок fr , который обозначает фракцию . Хорошая вещь об использовании блока fr заключается в том, что он заботится о вычислениях для вас. Использование fr позволяет избежать проблем с запасом и заполнением. С % и em и т. Д. Он становится математическим уравнением при расчете grid-gap . Если вы используете блок fr , он автоматически рассчитает размеры столбцов и желобов и соответствующим образом изменит размер столбцов, а также не будет недостатков кровотечения в конце.

Примеры

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

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

Простым решением является изменение grid-template-areas на основе размера экрана. Вы также можете изменить количество столбцов и строк на основе размера экрана . Это намного более простая и простая альтернатива сетке Bootstrap ( col-xs-8 col-sm-6 col-md-4 col-lg-3 ).

.site { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-areas: 
    "title title" 
    "main header" 
    "main sidebar" 
 } 
 
 @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ 
  .site { 
    grid-template-columns: 2fr 1fr 1fr; 
    grid-template-areas: 
      "title title title" 
      "main header header" 
      "main sidebar footer" 
  } 
 }

См. Таблицу CSS Pen Grid на примере - 2 (области сетки + сетчатый пробел) Aamnah Akram ( @aamnah ) на CodePen .

Дополнительная информация: