grid-template-columns CSS

Свойство grid-template-columns определяет колонки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

Свойство **`grid-template-columns`** определяет колонки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.
Значение по умолчанию:

none

Значение по умолчанию:
`none`
Наследуется:
Нет
Применяется:

к grid-контейнерам

Применяется:
к grid-контейнерам
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Grid Layout](https://drafts.csswg.org/css-grid/#propdef-grid-template-columns)
Поддержка браузерами:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-grid">Can I Use css-grid?</a> Data on support for the css-grid feature across the major browsers from caniuse.com. </p>

Синтаксис

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

Синтаксис

/* Keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* Global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset;

Значения

  • <track-size> — может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));
  • <line-name> — произвольное имя на ваш выбор;

Поддержка браузерами

  • Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Chrome 29.0.
  • Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), имея значение по умолчанию false. Насиная с Gecko 52.0 включено по умолчанию.
  • Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.
  • Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.
  • Экспериментальная реализация доступна в Safari Technological Preview.

Значения

* `<track-size>` — может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы `fr` (fraction)); * `<line-name>` — произвольное имя на ваш выбор; ### Поддержка браузерами * Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Chrome 29.0. * Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), имея значение по умолчанию false. Насиная с Gecko 52.0 включено по умолчанию. * Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation. * Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0. * Экспериментальная реализация доступна в Safari Technological Preview.

Примеры

Когда вы оставляете пустое пространство между значениями треков, линиям сетки автоматически присваиваются числовые имена:

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

CSS Grid Lime Numbers
CSS Grid Lime Numbers

Но вы можете называть линии явно. Обратите внимание на синтаксис для их названия:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

CSS Grid Lime Names
CSS Grid Lime Names

Обратите внимание на то что у линии может быть несколько названий. Например, здесь у второй линии будет два названия: row1-end и row2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Если в вашем определении содержатся повторяющиеся части, то можно использовать нотацию repeat():

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

Тоже самое что и:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

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

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Свободное пространство высчитывается после вычисления всех фиксированных элементов. В этом примере, общее количество свободного пространства для единиц fr не будет включать в себя 50px.

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Примеры

Когда вы оставляете пустое пространство между значениями треков, линиям сетки автоматически присваиваются числовые имена: .container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } ![CSS Grid Lime Numbers](/workspace/uploads/css/grid-numbers.png) Но вы можете называть линии явно. Обратите внимание на синтаксис для их названия: .container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; } ![CSS Grid Lime Names](/workspace/uploads/css/grid-names.png) Обратите внимание на то что у линии может быть несколько названий. Например, здесь у второй линии будет два названия: `row1-end` и `row2-start`: .container{ grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; } Если в вашем определении содержатся повторяющиеся части, то можно использовать нотацию `repeat()`: .container { grid-template-columns: repeat(3, 20px [col-start]) 5%; } Тоже самое что и: .container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%; } Единица `fr` позволяет вам настраивать размер треков как часть свободного пространства в контейнере. Вот пример, который устанавливает каждому элементу одну третью ширины контейнера. .container { grid-template-columns: 1fr 1fr 1fr; } Свободное пространство высчитывается после вычисления всех фиксированных элементов. В этом примере, общее количество свободного пространства для единиц `fr` не будет включать в себя 50px. .container { grid-template-columns: 1fr 50px 1fr 1fr; }

Содержание

  • Синтаксис
      /* Keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* Global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset;
  • Значения
    • Примеры
        Когда вы оставляете пустое пространство между значениями треков, линиям сетки автоматически присваиваются числовые имена: .container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } ![CSS Grid Lime Numbers](/workspace/uploads/css/grid-numbers.png) Но вы можете называть линии явно. Обратите внимание на синтаксис для их названия: .container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; } ![CSS Grid Lime Names](/workspace/uploads/css/grid-names.png) Обратите внимание на то что у линии может быть несколько названий. Например, здесь у второй линии будет два названия: `row1-end` и `row2-start`: .container{ grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; } Если в вашем определении содержатся повторяющиеся части, то можно использовать нотацию `repeat()`: .container { grid-template-columns: repeat(3, 20px [col-start]) 5%; } Тоже самое что и: .container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%; } Единица `fr` позволяет вам настраивать размер треков как часть свободного пространства в контейнере. Вот пример, который устанавливает каждому элементу одну третью ширины контейнера. .container { grid-template-columns: 1fr 1fr 1fr; } Свободное пространство высчитывается после вычисления всех фиксированных элементов. В этом примере, общее количество свободного пространства для единиц `fr` не будет включать в себя 50px. .container { grid-template-columns: 1fr 50px 1fr 1fr; }

    В начало