Более простой способ использовать CSS grid-template-area для охвата нескольких столбцов - PullRequest
Новая
       10

Более простой способ использовать CSS grid-template-area для охвата нескольких столбцов

0 голосов
/ 17 сентября 2018

Мне очень нравится простота и легкость манипулирования grid-template-areas, но есть ли более простой способ / ярлык для обозначения области, охватывающей несколько столбцов (скажем, 12) - внутри шаблона?

Это становится довольно грубым, когда у вас есть 12 столбцов ... 

.wrapper{
  display: grid;
  grid-template-areas:
    "nav nav cont cont cont cont cont cont cont cont cont cont";

  @media all and (max-width: 839px){
    grid-template-areas:
      "nav nav cont cont cont cont";
  }
}

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Именованные области - это просто ярлыки для именованных линий, поэтому вы можете использовать любой из нихНапример, ваш код из 12 столбцов может быть записан в виде: 

.wrapper{
  display: grid;
  grid-template-columns: [nav-start] repeat(2, auto) [nav-end cont-start] repeat(10, auto) [cont-end];
}

Имена строк -start и -end определяют именованные области так же, как grid-template-areas, и иногда болееудобно использовать.

(Тем не менее, я рекомендую обычно делать то, что сказал @ temani-afif, и вместо этого просто иметь два значащих столбца, используя fr единицы для обозначения их относительных размеров. Буквенные сетки из 12 столбцовартефакт старых ограничений, с которыми приходилось работать сеточным системам. Но, с другой стороны, использование нескольких столбцов иногда яснее, особенно если вы используете промежутки между столбцами.вы.)

0 голосов
/ 17 сентября 2018

Вы можете комбинировать это с grid-template-columns следующим образом: 

.wrapper{
  display: grid;
  grid-template-areas:
    "nav cont";
  grid-template-columns:2fr 10fr;

  @media all and (max-width: 839px){
    grid-template-areas:
      "nav cont";
    grid-template-columns:1fr 4fr;
  }
}

Пример: 

.wrapper {
  display: grid;
  grid-template-areas: "nav cont";
  grid-template-columns: 2fr 10fr;
}

.nav {
  grid-area: nav;
  height: 100px;
  background: red;
}

.cont {
  grid-area: cont;
  height: 100px;
  background: blue;
}

@media all and (max-width: 839px) {
  .wrapper {
    grid-template-areas: "nav cont";
    grid-template-columns: 1fr 4fr;
  }
}
<div class="wrapper">
  <div class="nav">
  </div>
  <div class="cont">
  </div>
</div>
...