Макет сетки

• [Первое предложение статьи] Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

1. Что такое сетка

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

Макет сетки и макет Flex имеют определенное сходство, оба могут указывать положение нескольких элементов внутри контейнера. Однако у них есть и важные отличия.

Flex layout — это осевой макет, который делится на основную ось и боковую ось.Вы можете указать только положение подэлементов в контейнере для оси, которую можно рассматривать как1D макет. Компоновка Grid делит контейнер на «строки» и «столбцы», генерирует ячейки, а затем указывает ячейку, в которой находится «элемент», что можно рассматривать как2D макет. Макет сетки гораздо мощнее, чем макет Flex.

2. Использование сетки

1.Основные свойства сетки

Сетчатые контейнеры и предметы

Прежде всего, нам нужно знать, что в макете сетки также есть «контейнер» и «элемент», который установлен на контейнере.display: grid;илиdisplay: inline-grid;Указывает, что контейнер является контейнером сетки, и все прямые дочерние элементы этого элемента станут элементами сетки.

grid: указывает, что сам контейнер является элементом уровня блока, а элемент уровня блока занимает собственную строку.

inline-grid: указывает, что сам контейнер является встроенным элементом, встроенные элементы и другие встроенные элементы могут учитываться как строки.

container — это контейнер сетки, а item — элемент сетки. Внук не является элементом сетки, поэтому родительский контейнер может влиять только на дочерний контейнер.

    <div class="container">
        <div class="item">
            <div class="grandson"></div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

линия сетки

Разделительная линия, которая отделяет структуру сетки. Они могут быть вертикальными («линии сетки столбцов») или горизонтальными («линии сетки строк»).

ячейка сетки

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

сетка трек

grid-template-columnsа такжеgrid-template-rowsсвойства для определения строк и столбцов в сетке. Трек сетки — это пространство между любыми двумя линиями сетки.

Как строки или столбцы в таблице. Он разделен на столбец сетки и строку сетки в сетке. Каждой дорожке сетки можно задать размер, который контролирует ширину или высоту.

область сетки

Общее пространство, ограниченное несколькими линиями сетки. Область сетки может содержать любое количество ячеек сетки.

2. Свойства родительского контейнера

Первое должно быть:display: grid | inline-grid | subgrid ;Указывает, что контейнер использует макет сетки.

• grid — генерировать сетку на уровне блоков
• inline-grid — генерировать сетку встроенного уровня
• subgrid — если ваш контейнер сетки сам является элементом сетки (т. е. вложенной сеткой), вы можете использовать это свойство, чтобы указать, что вы хотите получить размер строки/столбца от родителя, а не указывать собственный размер.

1. Ширина и высота дорожки сетки

grid-template-columnsатрибут определяет ширину столбца каждого столбца,grid-template-rowsСвойство определяет высоту каждой строки. Используйте массив перед размером, чтобы определить имя линий сетки, может быть много имен. Вы можете писать или нет, в зависимости от ваших потребностей.

 .container {
        width: 200px;
        height: 200px;
        display: grid;
     /* 定义了三列 每一行50px */
grid-template-columns: [first] 50px [line2]50px [line3]50px;
      /* 定义了三行 每一行50px */
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
    }

Эффект:

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

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 33.33%);//第一个参数是几份，后面可以说绝对单位，百分比，fr
grid-template-columns: repeat(3, 50px [col-start]);//携带网格线名字
grid-template-columns: repeat(2, 100px 20px 80px);//重复某种模式
grid-template-columns: 30% 50px auto;

Уведомление: при смешивании блоков, как показано ниже, fr — это доступная ширина минус 50 пикселей, а затем полученное пространство распределяется в равных количествах.

grid-template-columns: 1fr 50px 1fr 1fr;

2. Шаг сетки

grid-row-gapСвойство задает межстрочный интервал (межстрочный интервал),grid-column-gapСвойство задает интервал между столбцами (расстояние между столбцами),grid-gapсобственностьgrid-column-gapа такжеgrid-row-gapКомбинированная аббревиатура .grid-gap: <grid-row-gap> <grid-column-gap>

    .container {
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
      /* grid-gap: 5px 5px;合并写法 */
    }

Эффект:

3. Область сетки

по ссылкеgrid-area-nameСвойство указывает имя области сетки для определения шаблона сетки. Повторение имен областей сетки приводит к тому, что содержимое расширяется в эти ячейки. Знак точки указывает на пустую ячейку. Сам синтаксис обеспечивает визуализацию структуры сетки.

Определите область сетки 2*3 и дайте ей имя. Любое количество соседних.объявить одну пустую ячейку. Пока между этими точками нет пробелов, они представляют собой одну ячейку.

  .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
        grid-template-areas: "head head "
                              ". main"
                            ". foot";
    }

Эффект:

Уведомление:

Именование регионов влияет на линии сетки. Начальная линия сетки для каждой области, автоматически именуемая как区域名-start, завершающая линия сетки автоматически получает имя区域名-end.

Например, район под названиемheader, горизонтальные и вертикальные линии сетки в начальном положении называютсяheader-start, горизонтальные и вертикальные линии сетки в конечном положении называютсяheader-end.

4. Выравнивание сетки

justify-contentАтрибут представляет собой горизонтальное положение (слева, посередине, справа) всей области содержимого внутри контейнера,align-contentСвойство представляет собой вертикальное положение (сверху, посередине, снизу) всей области содержимого.

Относится к тому, как все содержимое расположено в контейнере.

Значения:

• start - начальная граница выровненного контейнера.
• end - конечная граница выровненного контейнера.
• center - Центрировать внутреннюю часть контейнера.
• растяжение — если размер элемента не указан, растяжение занимает весь контейнер сетки.
• space-round - равный интервал с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей контейнера.
• space-between — пространство между элементами одинаковое, между элементами и границами контейнера нет пробелов.
• space-evenly — элементы располагаются на одинаковом расстоянии от элемента к элементу, а элементы отстоят от границы контейнера на одинаковую длину.

place-contentсобственностьalign-contentсвойства иjustify-contentКомбинированное сокращение для свойствplace-content: <align-content> <justify-content>

    .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3,50px);
        grid-template-rows: repeat(3,50px);
        grid-row-gap:5px;
        grid-column-gap:5px;
        background: #def1a9;
        justify-content: start;
        align-content: end;
    }

设置一个水平靠左，垂直靠底部。 Эффект:

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

justify-content: center;
align-content: center;

5. Ячейки выровнены

justify-itemsСвойство задает горизонтальное положение содержимого ячейки (слева, посередине, справа),align-itemsСвойство задает положение ячейки по вертикали (сверху, посередине, снизу)

Стоимость:

• start: выравнивает начальный край ячейки.
• end: Выровняйте конечный край ячейки.
• центр: ячейка центрируется внутри.
• растянуть: растянуть, чтобы заполнить всю ширину ячейки (по умолчанию).

использоватьjustify-itemsНапример:

justify-items: start -- выравнивание начального края ячейки

justify-items: end — выравнивание по краю ячейки

justify-items: center; -- центрировать по горизонтали

justify-items: stretch; (по умолчанию) растягивается на всю ширину ячейки.

6. grid-auto-flow

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

Если изменить на:

grid-auto-flow: column;

Эффект:

Посмотрим, какие значения

grid-auto-flow: row|column|dense|row dense|column dense;

стоимость	описывать
row	По умолчанию. Заполняя каждую строку, чтобы разместить элементы сетки, при необходимости добавить новый столбец.
column	Разместите элементы сетки, заполняя каждый столбец и добавляя новые столбцы по мере необходимости.
dense	Это ключевое слово указывает, что алгоритм Auto Layout использует алгоритм «плотного» наложения, который пытается заполнить пробелы, оставшиеся в сетке, если более мелкие элементы появляются позже. Это заполнит промежутки, оставленные более крупными элементами, но также может привести к нарушению исходного порядка.
row dense	Заполните предыдущие пробелы в сетке по строкам
column dense	Заполните предыдущие пробелы в сетке по столбцам

Определяет, как работает алгоритм Auto Layout, точно определяя, как автоматически размещаемые элементы располагаются в сетке.

Что это значит?

Когда я создал сетку 2*3, я сделал третью сетку шириной в две ячейки, код выглядит следующим образом

<body>
    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .item3 {
        grid-column: auto / span 2;
    }
    .grid-container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
        /* grid-auto-flow: row dense; */
    }
    .grid-container>div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }
</style>

Когда я устанавливаю grid-auto-flow: ряд плотно; для контейнера сетки, он заполняет пробелы, оставленные в каждой строке.

Когда я позволяю третьему занимать три ширины grid-column: auto / span 3; и устанавливаю grid-auto-flow: row; он добавит строку, помните, что я только установил сетку 2 * 3 ранее.

Установите grid-auto-flow: column, если этого недостаточно, будет добавлен столбец.

Пополнить:

grid-auto-columnsсвойства иgrid-auto-rowsСвойства используются для установки ширины столбца и высоты строки дополнительной сетки, автоматически создаваемой браузером. Если эти два свойства не указаны, браузер определяет ширину столбца и высоту строки только что добавленной сетки на основе размера содержимого ячейки.

7. свойство сетки-шаблона, свойство сетки

grid-templateсобственностьgrid-template-columns,grid-template-rowsа такжеgrid-template-areasКомбинированное сокращение для этих трех свойств.

gridсобственностьgrid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,grid-auto-flowКомбинированное сокращение для этих шести свойств.

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

3. Свойства элемента

Свойства элемента, как следует из названия, — это свойства, определенные в дочерних узлах родительского контейнера.

1. свойство grid-column, свойство grid-row

grid-columnсобственностьgrid-column-startа такжеgrid-column-endКомбинированная краткая форма ,grid-rowсобственностьgrid-row-startсвойства иgrid-row-endКомбинированная аббревиатура .

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

• grid-column-startсвойство: вертикальная линия сетки, где расположена левая граница
• grid-column-endсвойство: вертикальная линия сетки, где находится правая граница
• grid-row-startАтрибут: горизонтальная линия сетки, где расположена верхняя граница.
• grid-row-endАтрибут: горизонтальная линия сетки, где расположена нижняя граница.

Например:

<body>
    <div class="container">
        <div class="item1">浪</div>
        <div class="item2">漫</div>
        <div class="item3">主</div>
        <div class="item4">义</div>
        <div class="item5">码农</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3, 50px);
        grid-template-rows: repeat(3,50px);
        grid-gap: 5px;
        background-color: #2196F3;
        padding: 10px;
        justify-content: center;
        align-content: center;
    }
    .item1 {
        grid-column:1 / 3;
        background: #0F85CC;
    }
    .item2 {
        grid-row: 1 / 3;
        grid-column: 3 / 4;
        background: #1fe605;
    }
    .item3 {
        grid-row: 2/4;
        grid-column: 1/2;
        background: burlywood;
    }
    .item4 {
        grid-row: 3/4;
        grid-column: 2/4;
        background: #10caf9;
    }
    .item5 {
        border-radius: 50%;
        text-align: center;
        background: #E60537;
    }
</style>

Эффект:

Если линия сетки не указана, по умолчанию она будет равна 1, 2, 3...

Есть несколько способов записи:

• number: может быть числом для ссылки на линию сетки с соответствующим номером или именем для ссылки на линию сетки с соответствующим именем.
• span : элемент сетки будет охватывать указанное количество дорожек сетки
• span : элемент сетки будет охватывать несколько дорожек, пока не попадет на указанную именованную линию сетки.
• auto: автоматический макет, или автоматический диапазон, или диапазон дорожки по умолчанию

Например:

.item-c {
  grid-column: 3 / span 2;//从第3条网格线开始，跨过两列
  grid-row: divname / 5;//从divname开始到第5条网格线
}

2. свойство области сетки

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

grid-areaсвойства также могут использоваться какgrid-row-start,grid-column-start,grid-row-end,grid-column-endОбъединенное сокращение для , которое непосредственно указывает местоположение элемента.

Например:

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

Использование здесь такое же, как и выше, с небольшими пояснениями.

3. свойство justify-self, свойство align-self, свойство place-self

justify-selfСвойство задает горизонтальное положение содержимого ячейки (слева, по центру, справа), за которым следуетjustify-itemsСвойства используются точно так же, но только на одном элементе.

align-selfСвойство задает вертикальное положение содержимого ячейки (сверху, посередине, снизу), за которым следуетalign-itemsИспользование свойств точно такое же, и оно работает только с одним элементом.

place-selfсобственностьalign-selfсвойства иjustify-selfОбъединить сокращенные свойства.

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

.item1{
        justify-self: start;
    }

На этом этапе мы представили нашу сетку.

напиши в конце

Наконец, я поделюсь тем, что нарисовал сам, и использую сетку для рисования олимпийского кольца. Следующий шуй🚣 код.

Большие ребята приветствуют комментарии, официальный представитель Nuggets будет вПроект «Звезда раскопок»После мероприятия, в зоне комментариев вокруг Nuggets прокачивали 100 деталей, проводились розыгрыши, подробно описанные в статье». Вроде точка сбора + тройка ключей. Следующий счастливчик - ты.

🤺🏇🏂🏄‍♂️🏄‍♀️🚣🏊
доля:

Поскольку вы определили путь, зачем спрашивать, сколько времени это займет?

⛹️🏋️‍♀️🚴🚴‍♂️🚵🚵‍♀️🤸‍♀️🤼