[Перевод] Понимание CSS Grid: Создание Grid-контейнера


Понимание CSS Grid: Создание Grid-контейнера


Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю


Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.


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


В этой статье мы рассмотрим:



Создание grid-контейнера с помощью display: grid или display: inline-grid

Создание колонок и строк с помощью grid-template-columns и grid-template-rows

Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Читать дальше → Уроки CSS на Хабрахабре


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



Похожие публикации

[Перевод] CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.... читать далее

Grid Layout как основа современной раскладки

В темные века верстальщики строили сайты на таблицах. Потом они освоили float и flexbox, и тьма отступила. В 2017-м наступила эпоха Просвещения с приходом CSS Grid Layout. Grid учитывает... читать далее

[Перевод] Учим CSS Grid за 5 минут

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

[Перевод] Что происходит при создании контейнера Flexbox?

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS. В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как... читать далее

[Перевод] Именование в CSS Grid

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

CSS Grid Layout. Быстрый старт

Вступление Всем привет. Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте