CSS Grid: grid-items

Здравствуйте. Сегодня я хочу поговорить об одном из основных строительных блоков CSS Grid: элементах grid-item. Знание того, что такое элементы grid-item и какую роль они играют, необходимо для создания самых простых макетов с помощью CSS Grid. Я надеюсь, что вы найдете этот материал полезным. Давайте начнем.

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


Определение Grid-элемента.

Grid-item — это элемент HTML, который непосредственно вложен в grid-container.

<div class="container">
  <div> <!-- grid-item -->
    <div></div> <!-- not grid-item -->
  </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Элемент grid-item должен быть способен содержать содержимое (другие HTML-элементы или текст). Однако некоторые пустые элементы (например, <img/> или <input>) также могут рассматриваться как grid-item.

<!-- All elements inside this container are grid-items -->
<div class="container">
  <div></div>
  <span></span>
  <img src="..." />
  <input value="..."/>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Что важно, даже другая сетка может играть роль элемента grid-item. Такие сетки называются вложенными, и я расскажу о них в одной из будущих статей.

Стандартное размещение элементов grid-item внутри сетки.

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

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

Выравнивание элементов сетки по умолчанию внутри ячейки сетки.

По умолчанию размер элемента элемента сетки равен размеру назначенной ему ячейки. Элемент сетки заполняет свободное пространство внутри ячейки.

Пользовательское размещение или выравнивание элементов сетки.

Как уже упоминалось, описанные ранее методы размещения/выравнивания элементов сетки являются методами по умолчанию, используемыми алгоритмом автоматического размещения. Однако эти методы могут быть переопределены разработчиком. Вот примеры:

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

Тема пользовательского размещения или выравнивания элементов сетки немного более обширна, поэтому я опишу ее более подробно в отдельных статьях.

Крайние случаи.

Следует отметить, что есть некоторые специфические случаи, связанные с темой grid-item, которые я не рассматривал в этой статье. Например:

  • Что произойдет, если в качестве grid-item использовать текст или неупомянутые пустые элементы?
  • Что произойдет, если элементов сетки будет больше, чем ячеек?

Эти вопросы, несмотря на их важность, выходят за рамки простого введения в grid-items. Поэтому я постараюсь ответить на них в ближайшее время, когда буду обсуждать более сложные вопросы, связанные с этой темой.


Спасибо, что прочитали эту короткую статью. Если вы хотите прочитать больше подобных материалов, вы можете следить за моим аккаунтом на dev.to или twitter. Кроме того, не стесняйтесь давать мне обратную связь в любой форме. Я буду рад прочитать любые ваши комментарии. До скорой встречи в моей следующей статье!


PS. Если вы хотите поддержать мою работу, я буду благодарен за чашку кофе. Спасибо. ❤️

Оцените статью
Procodings.ru
Добавить комментарий