Связь между областями сетки-шаблона и столбцами сетки-шаблона - PullRequest
Новая
       1

Связь между областями сетки-шаблона и столбцами сетки-шаблона

2 голосов
/ 07 октября 2019

Я новичок в кодировании и, похоже, неправильно понимаю модель CSS Grid. В приведенном ниже коде сетка разделена на 3 столбца-шаблона-сетки (по 300 пикселей каждый), но в области шаблонов-сеток по 8 блоков на строку (например: hd hd hd hd hd hd hd hd), а не 3что не имеет смысла для меня. Может кто-нибудь, пожалуйста, помогите мне понять, почему количество блоков в области grid-template-area не совпадает с количеством столбцов? (так будет "hd hd hd", если есть 3 столбца). Какое у них отношение? 

.container {
    display:grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 600px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
}

Ответы [ 2 ]

2 голосов
/ 07 октября 2019

Определив свои области шаблона, вы определили сетку с элементами 8x3. По умолчанию эти элементы будут иметь автоматическую ширину и автоматическую высоту, как показано ниже: 

.container {
    display:grid;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

Высота будет равна 0, поскольку содержимого нет, а ширина вашего контейнера будет разделена поровну на 8 столбцов.

ЕслиВы добавляете template-колонки / строки, вы будете точно определять ширину / высоту дорожек сетки. Определив только 3 числа внутри grid-template-columns, вы определите ширину только для первых 3 столбцов, а остальные останутся auto. Та же логика с grid-template-rows

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

Если я рассмотрим приведенный выше код, у вас будет 50px 50px 50px auto auto auto auto auto для столбцов и 50px 60px auto для строк.

Чтобы быть более точным, вот описание для разделения:

Размер явной сетки определяется большим числом строк / столбцов , определяемым grid-template-areas и количество строк / столбцов размером grid-template-rows / grid-template-columns. Любые строки / столбцы, определенные как grid-template-areas, но не имеющие размера grid-template-rows / grid-template-columns, берут свой размер из свойств grid-auto-rows / grid-auto-columns. ref

Как вы можете ясно видеть, мы попадаем в случай, когда у нас есть строки / столбцы размером не grid-template-rows / grid-template-columnsпоэтому их размер будет определяться как grid-auto-rows / grid-auto-columns, где значение по умолчанию установлено на auto

. Вы можете отрегулировать значение, чтобы получить другой результат: 

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-auto-columns:10px;
    grid-auto-rows:20px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}
<div class="container">

</div>

Приведенный выше код даст использование 50px 50px 50px 10px 10px 10px 10px 10px для столбцов и 50px 60px 20px для строк.

1 голос
/ 07 октября 2019

Первые три hd столбца будут иметь ширину 300px.

Остальные пять hd столбцов будут по умолчанию равны content-width (auto).

The *Свойство 1008 * устанавливает ширину столбцов последовательно. Таким образом, первые три столбца имеют ширину 300 пикселей.

Остальные столбцы hd не имеют соответствующей ширины, установленной в grid-template-columns, поэтому они, по сути, width: auto. Более конкретно, столбцы, определенные в grid-template-areas, но не имеющие размера grid-template-columns, , управляются grid-auto-columns, который по умолчанию имеет значение auto.

...