Главная » CSS3 » Grid » Явная и неявная сетка grid
24 0  

Явная и неявная сетка grid

Сетка CSS определяется с использованием значения сетки свойства display; Вы можете определить столбцы и строки в вашей сетке, используя свойства grid-template-row и grid-template-columns.

Сетка, которую вы определяете с помощью этих свойств, описывается как явная сетка.


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

Неявная сетка - это сетка, создаваемая автоматически благодаря добавлению контента за пределы определенных дорожек.

Пример:

В приведенном примере есть явная сетка из трех столбцов и двух строк.

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

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

Явная и неявная сетка grid 

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020