Какой вид отображения являются прямыми дочерними элементами контейнера, использующими display: grid? - PullRequest
Новая
       10

Какой вид отображения являются прямыми дочерними элементами контейнера, использующими display: grid?

4 голосов
/ 06 марта 2019

Если в HTML есть только тег p, который имеет синий цвет фона и имеет margin: auto, тогда он занимает ширину страницы, и ширина и отступ могут быть изменены, как встроенный блок. 

p {
  background-color: blue;
  margin: auto;
}
<p>Lorem ipsum</p>

Но если я добавлю родительский элемент div к тегу p и сделаю div равным display: grid с grid-template-columns: 1fr, тогда синий фон будет занимать только ширину текста. 

div {
  display: grid;
  grid-template-columns: 1fr;
}

p {
  background-color: blue;
  margin: auto;
}
<div>
  <p>Lorem ipsum</p>
</div>

Итак, display: grid заставляет дочерние элементы иметь display: inline-block?

Ответы [ 4 ]

3 голосов
/ 06 марта 2019

Ответ - нет. Использование display: grid не делает дочерние элементы display: inline-block.

Когда вы устанавливаете элемент в display: grid или inline-grid, вы устанавливаете контекст форматирования сетки . Это уникальная структура макета со своим набором правил. Тот факт, что некоторые поведения совпадают с поведениями в контексте форматирования блока , является случайным.

Значение display элементов сетки определяется контейнером сетки. На самом деле, не имеет значения, что говорит значение (в инспекторах браузера) или что автор объявляет (вы можете установить display на любое значение), эти значения игнорируются, а окончательное поведение контролируется контейнером сетки. .

Значение гибких элементов display работает таким же образом.

Подробнее:

2 голосов
/ 06 марта 2019

Влево и вправо auto Значения полей ведут себя по-разному в контексте согнутых или сеточных элементов.Он полностью свернет элемент до его собственной ширины, вместо того, чтобы позволить ему расширяться, как ожидалось.

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

div {
	display: grid;
	grid-template-columns: 1fr;
}

p {
  	background-color: blue;
	margin: auto;
}
<div>
  <p>Lorem ipsum</p>
</div>
1 голос
/ 06 марта 2019

Вот код, который вы описали: 

p {
    background-color: blue;
    margin: auto;
}

div {
    display: grid;
    grid-template-columns: 1fr;
}
<div>
	<p>Some content goes here...</p>
</div>

Вот код с display: inline-block: 

p {
    background-color: blue;
    margin: auto;
}

div {
    display: inline-block;
}
<div>
	<p>Some content goes here...</p>
</div>

Как видите, результаты немного отличаются.Если вы должны были проверить консоль и выбрать сетку, она все равно будет иметь всю ширину экрана, потому что вы установили только 1 столбец.Тем не менее, синий фон будет только в части этого элемента.Когда вы используете margin: auto для элемента внутри сетки, он будет центрироваться внутри себя, действуя как контейнер.

0 голосов
/ 06 марта 2019 

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    div {
    display: grid;
    grid-template-columns: 1fr;
    }
    p
    {
      background-color: blue;
      margin: auto;
    }
    </style>
    </head>
    <body>
      <div>
          <p>This is the p tag</p>
    </div>
      
    </body>
    </html>
...