Простое использование CSS Grid

Простое использование CSS Grid

От автора: возможно, вы слышали о CSS Grid, так давайте попробуем его. Может быть, вы не знали, с чего начать. Как учить CSS Grid? Rachel сделала замечательную серию демонстраций по Grid. Как только вы изучите основы, вам будет сложно понять, где использовать сетки. На днях я игрался с сетками и наткнулся на довольно простой пример

Например, вам нужно создать две колонки. Я создавал базовый двухколоночный макет для резюме на моем сайте. Макет был примерно следующим:

Простое использование CSS Grid

Довольно просто, так ведь? Основная колонка и сайдбар. До сегодняшнего дня для создания подобного макета мы использовали хаки Float и даже Flexbox. Забавно, что даже Flexbox не до конца подходит под такой макет. Идеальное решение – Grid. С Flexbox вам пришлось бы писать примерно следующий код:

<div class="wrapper">
  <section class="main-column">
 Your content here.
  </section>

  <aside class="sidebar">
 Your sidebar content here.
  </aside>
</div>

CSS был бы примерно таким:


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

.wrapper {
  display: flex;
}

.main-column {
  width: 70%;
  /* Обойдем box-model и используем padding */
  padding-right: 2rem;
}

.sidebar {
  width: 30%;
}

Это только скелет. Метод выше требует 10 строк кода для базового макета. Теперь давайте сделаем это на Grid с тремя строками.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-gap: 2rem;
}

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

/* Если браузер поддерживает Grid, используется код ниже */
@supports (display: grid) {
  .wrapper {
 display: grid;
 grid-template-columns: 70% 30%;
 grid-gap: 2rem;
  }
}

/* Если браузер не поддерживает Grid, используется код ниже */
@supports not (display: grid) {
  .wrapper {
 display: flex;
  }

  .main-column {
 width: 70%;
 padding-right: 2rem;
  }

  .sidebar {
 width: 30%;
  }
}

Автор: Timothy B. Smith

Источник: https://theboldreport.net/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree