Адаптивная сетка в CSS

Что такое Grid-View?

Grid-view делит страницу на строки и столбцы, и многие веб-страницы построены на его основе.

Адаптивные grid-view часто используют 6 или 12 столбцов, а также сжимаются и расширяются вместе с окном браузера.

Создание Grid View

Прежде всего задайте каждому HTML-элементу значение border-box для box-sizing. Тогда общая ширина и высота элемента будут включать его отступы и рамку.

Поместите это правило в начало вашего CSS:

Сброс box-sizing

Благодаря универсальному селектору каждый элемент на странице получает box-sizing: border-box.

styles.css 
* {
  box-sizing: border-box;
}

HTML

Grid-контейнер содержит пять элементов сетки: шапку, меню, основное содержимое, раздел фактов и подвал.

HTML-структура сетки

Вот весь HTML сеточной раскладки. У каждого раздела есть собственный <div>, и именно имя его класса связывает его с областью сетки.

index.html 
<div class="grid-container">

  <div class="header"><h1>Chania</h1></div>

  <div class="menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete.</p>
    <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
    <p>Chania lies along the north west coast of the island Crete.</p>
  </div>

  <div class="facts">
    <h2>Facts:</h2>
    <ul>
      <li>Chania is a city on the island of Crete</li>
      <li>Crete is a Greek island in the Mediterranean Sea</li>
    </ul>
  </div>

  <div class="footer"><p>A footer.</p></div>

</div>

CSS

Затем стили и цвета улучшают внешний вид сеточной раскладки.

Примечание: В следующей главе показано, как медиазапросы и точки перелома работают с разными размерами экрана.

Пример

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

Prompt
Создайте страницу с адаптивной сеточной раскладкой о городе Ханья. Используйте CSS Grid с именованными областями шаблона для шапки, меню, основного содержимого, боковой панели с фактами и подвала. Оформите шапку фиолетовым цветом, элементы меню синим цветом с эффектами при наведении, блок фактов с бежевым фоном и рамкой, и синий подвал. Примените box-sizing: border-box ко всем элементам.
Результат: полная HTML-страница