Используйте CSS Grid Generator, чтобы быстро использовать и изучать сетку.

JavaScript CSS

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

CSS Grid Generator

CSS Grid GeneratorэтоSarah DrasnerСоздан бесплатный инструмент. Это инструмент визуального дизайна, который позволяет нам создать базовый макет сетки, а затем мы можем использовать его для создания соответствующего кода, который поможет нам быстро выполнить макет.

Первый раз, когда вы входите в интерфейс, это выглядит так:

Пример компоновки CSS Grid

Когда я чему-то учусь, я считаю, что лучший способ научиться — создать что-то практичное, используя существующие инструменты. В этой статье мы начнем с простого макета, затем используемCSS Grid GeneratorСоздайте необходимый код для использования в реальных проектах.

Начните с типичного макета, подобного этому:

Затем обновите следующее содержимое в правой части интерфейса CSS Grid Generator:

  • линии: 4
  • Столбцы: 3
  • Расстояние между столбцами: 20
  • Межстрочный интервал: 20

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

Далее необходимо определить различные области приложения. существуетCSS Grid Generator, вы можете щелкнуть и перетащить, чтобы создать область, в которой вы хотите объединиться. мы надеемсяFooterохватывает всю сетку, боковая панель занимает одну ячейку, а область основного содержимого занимает2Список,FooterПересечение4Столбец, последний эффект, следующим образом:

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

  • Header: 100px height
  • Sidebars: 200px width
  • Footer: 50px height

Это больше похоже на макет, который нам нужен, но вы можете спросить1frКак много.

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

вторая линия1frскажет региону занять оставшееся свободное место. Если вы установите контейнер в100vh, он занимает все содержимое страницы, как и столбец.

Код, сгенерированный с помощью CSS Grid Generated

Нажмите «Пожалуйста, дайте мне код в примере», чтобы увидеть код CSS, сгенерированный для соответствующего макета:

.parent { 
display: grid; 
grid-template-columns: 200px 1fr 1fr 200px; 
grid-template-rows: 100px 1fr 50px; 
grid-column-gap: 20px;
grid-row-gap: 20px; 
.div1 { grid-area: 1 / 1 / 2 / 5; } 
.div2 { grid-area: 2 / 1 / 3 / 2; } 
.div3 { grid-area: 2 / 2 / 3 / 4; } 
.div4 { grid-area: 2 / 4 / 3 / 5; } 
.div5 { grid-area: 3 / 1 / 4 / 5; } 
}

Создаватьsimple-layout.htmи добавьте следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

</body>
</html>

Затем добавьте сгенерированный выше CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .parent {
      display: grid;
      grid-template-columns: 200px 1fr 1fr 200px;
      grid-template-rows: 100px 1fr 50px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      height: 100vh;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 5;
    }

    .div2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .div3 {
      grid-area: 2 / 2 / 3 / 4;
    }

    .div4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .div5 {
      grid-area: 3 / 1 / 4 / 5;
    }
  </style>
</head>
<body>

</body>
</html>

Затем добавьте соответствующие теги:

<body>
  <div class="parent">
    <div class="div1">
      Header
    </div>
    <div class="div2">
      Left Sidebar
    </div>
    <div class="div3">
      Main Content
    </div>
    <div class="div4">
      Right Sidebar
    </div>
    <div class="div5">
      Footer
    </div>
  </div>

</body>

Наконец добавьте следующий CSS, это будет.div1 - .div5 Добавьте цвет фона:

div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}

бегать:

Это выглядит хорошо, но вы хотите, чтобы он занимал все окно браузера. Поэтому необходимо.parentдобавлен классheight: 100vh:

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}

окончательный эффект:

Закуска с сеткой

Между двумя соседними сетевыми линиями находится сетевая дорожка.

На рисунке 1 и 2, 2 и 3 в одном направлении — это все соседние сетевые линии.Конечно, 1 и 3 в одном направлении или 1 и 2 в разных направлениях не являются соседними сетевыми линиями.

Смежные сетевые линии представляют собой дорожки сетки, как показано ниже, сетевая дорожка формируется между черными 1 и 2 (темно-оранжевый фон):

Вверху всего 5 сетевых дорожек, 1 и 2, 2 и 3, 3 и 4 в горизонтальном направлении и 1 и 2, 2 и 3 в вертикальном направлении, всего 5.

Закуска из ячеек сетки

Две соседние сетевые линии столбца и две соседние сетевые линии строки образуют сетевую единицу, такую ​​как темно-оранжевый фон ниже.

Сетевой элемент следует отличать от сетевого элемента (элемента).Сетевой элемент — это элемент Dom, который можно найти в Html, а сетевой элемент — это ячейка, которая выделяется при определении контейнера.

Закуска в области сетки

Общее пространство окружено четырьмя сетевыми линиями.

fr unit (с едой)

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

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

Ссылаться на

Dev.to/theme Класс Большая девочка…

Учебное пособие по сетке МООК

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Большой шаг в мир» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Звезда и совершенство приветствуются. Для собеседований вы можете обратиться в тестовый центр для ознакомления. Кроме того, обратите внимание на паблик-аккаунт и ответ в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории