Размеры строк и столбцов Grid Layout

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем разбираться с версткой на основе Grid Layout. И в этом уроке в продолжении урока по строкам и столбцам grid разберем как задавать размеры строкам и столбцам в  сетке grid. Размеры можно задавть как фиксироваными, так и автоматическими. А сейчас давайте разбираться по порядку.

Размеры строк и столбцов в Grid

Фиксированные размеры

Во всех наших примерах по Grid Layout мы с вами применяли для задания столбцев и строк фиксированные размеры причем единицы измерения, которые можно для них задавать это все стандартные единицы, поддерживаемые CSS (px,%,mm).

.container {
    border: solid 2px red;
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(3, 1.5em);
}

Автоматические размеры

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            .container {
                border: solid 2px red;
                display: grid;
                grid-template-columns: 5em auto auto;
                grid-template-rows: auto 3.5em auto;
            }
            .grid-item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.7em;
                color: white;
            }
            .cvet1 {background-color: magenta;}
            .cvet2 {background-color: orange;}
            .cvet3 {background-color: blue;}
            .cvet4 {background-color: tomato;}
            .cvet5 {background-color: grey;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-item cvet1">Grid Item 1</div>
            <div class="grid-item cvet2">Grid Item 2</div>
            <div class="grid-item cvet3">Grid Item 3</div>
            <div class="grid-item cvet4">Grid Item 4</div>
            <div class="grid-item cvet5">Grid Item 5</div>
            <div class="grid-item cvet1">Grid Item 6</div>
            <div class="grid-item cvet2">Grid Item 7</div>
        </div>
    </body>
</html>

Просмотреть  пример

В примере  задано 3 строки и 3 столбца. 1-ый столбец имеет фиксированную ширину в 5em, а 2 и 3 столбцы - автоматическую ширину. И также 1 и 3 строки имеют автоматическую высоту, а вторая строк - фиксированая.

 

Пропорциональные размеры строк и столбцов

А вот для установки пропорциональных размеров  следует использовать единицу измерения fr.  Данная единица представляет й часть пространства (fraction), которое будет отведено  для данного столбца или строки.  Также его еще называют флекс-фактором.

Пропорциональные размеры вычисляются по формуле:

flex-фактор * доступное_пространство  / сумма всех flex-факторов

Доступное пространство - это все пространство grid-контейнера за исключением фиксированных значений строк и столбцов конечно же.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height: 100vh;
                border: solid 2px red;
                display: grid;
                grid-template-columns: 5em 2fr 1fr;
                grid-template-rows: 1fr 3.5em 1fr;
            }
            .grid-item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.5em;
                color: white;
            }
            .cvet1 {background-color: magenta;}
            .cvet2 {background-color: orange;}
            .cvet3 {background-color: blue;}
            .cvet4 {background-color: tomato;}
            .cvet5 {background-color: grey;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-item cvet1">Grid Item 1</div>
            <div class="grid-item cvet2">Grid Item 2</div>
            <div class="grid-item cvet3">Grid Item 3</div>
            <div class="grid-item cvet4">Grid Item 4</div>
            <div class="grid-item cvet5">Grid Item 5</div>
            <div class="grid-item cvet1">Grid Item 6</div>
            <div class="grid-item cvet2">Grid Item 7</div>
        </div>
    </body>
</html>

Просмотреть  пример

 

В примере имеются 3 столбца с шириной 2fr, 5em, 1fr. Поэтому ширина первого столбца будет вычисляться по формуле:

2 * (ширина_грида - 5em) / (2 + 1)

Ширина 3 столбца будет вычисляться по формуле:

1 * (ширина_грида - 5em) / (2 + 1)

А вот если 2 столбец будет фиксированный с шириной 5em, то ширины 1 и 3 столбца будут зависеть от ширины контейнера, а следовательно и будут автоматически масштабироваться при ее изменении.

В отношении строк все аналогично. Думаю вы уже и сами догадались

 

Прочитано 220 раз Последнее изменение Воскресенье, 17 сентября 2017 15:26
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+