Блог

К сожалению, мне было очень трудно найти примеры людей, использующих CSS Grid с оболочкой. Это то, что я придумал.

Часть оболочки моего сайта имеет максимальную ширину 1340 пикселей. На нашем веб-сайте используется 5 столбцов, поэтому каждый столбец имеет размер 268 пикселей. Обратите внимание, что некоторые элементы выходят из оболочки, чтобы покрыть всю ширину.

 // WRAPPER CONFIG
$wrapper-width: 1340px; // Based on design PSD
$column-width: 268px; //1340 / 5 = 268. Our design uses 5 columns.

.grid {
    display: grid;
    grid-template-columns:
    minmax(1rem, 1fr) //space left of wrapper
    minmax(min-content, $column-width) //column with 268px width
    minmax( min-content, calc(4 * #{$column-width}) ) // column with 1072px width
    minmax(1rem, 1fr); //space right of wrapper

    grid-template-areas: //example layout
    "A A A A"
    ". B B ."
    "C C C C"
    ". D D .";
}
  

Есть комментарии и критические замечания? Если вы знаете лучший пример / ресурс, я хотел бы знать.