CSS Grid. Автозаполнение в неявной сетке

#css #css3 #css_grid #grid_layout

собственно сетка на codepen



main {
  display: grid;
  padding: 10px 0 10px 10px;
  grid-template: 1fr/repeat(6, 1fr);
  grid-template-areas: "a a a b b b";
  grid-auto-columns: 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

main .a {
  grid-area: a;
}

main .b {
  grid-area: b;
}

.cat {
  height: 150px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  background-color: green;
  color: #fff;
}

.cat:hover {
  background-color: #004800;
}

  

  

  

  

  

  

  

  

  






Как сделать так, чтобы после первой строки остальные элементы занимали не 1/6, а 1/3?
Без использования вложенных элементов.
Количество элементов после первой строки может быть абсолютно любым, поэтому я хочу
использовать автоматическое присвоение ширины, но свойство grid-auto-columns: 2fr;
не дает результатов.


    

Ответы

Ответ 1

Задаем шаблон из 6 равных столбцов grid-template-columns: repeat(6, 1fr) 
Обращаемся к первым двум
элементам и делаем так, чтобы они занимали по три столбца каждый с
помощью правила span 3
Остальные элементы занимают два столбца -
span 2




body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  min-height: 100vh;
}

div {
  background: pink;
  grid-column: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

div:first-child,
div:nth-child(2) {
  grid-column: span 3;
}
1
2
3
4
5
6
7
8
9