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

Для чего нужен отрицательный margin и положительный padding в bootstrap?

#css #bootstrap #padding #margin #grid_layout

Bootstrap'ом редко пользовался, как-то не вникал в эти положительные и отрицательные
отступы блоков.  

Подскажите, для чего в блоке .container положительный padding, а в блоке .row отрицательный
margin? Какая практическая польза в этих отступах?  
    

Ответы

Ответ 1

Это сделано для выравнивания.  

У каждой колонки слева и справа есть padding, равный 15px. Он нужен для генерации
одинакового отступа между колонками. Однако в этом случае отступ слева у первой и отступ
справа у последней колонки в строке складывается с отступами контейнера.

Чтобы нивелировать его используется .row с отрицательным margin равным 15px. Если
использовать .row, то левый отступ у первого столбца и правый отступ у правого столбца
"проваливаются" в уже существующие отступы у контейнера и не занимают дополнительного
места.  

На вопрос почему бы не убрать отступ у контейнера и отказаться от отрицательного
margin у .row ответ простой: блоков с контейнером может быть несколько, и в одном из
них может отсутствовать сетка.

Чтобы блоки с сеткой и без нее были выравнены по левой и правой границе, как раз
и придумали этот прием с отрицательными margin. А сам padding у контейнера еще нужен
и для того, чтобы его содержимое не прилипало к границе экрана на небольших разрешениях.

update: при многократной вложенности, в качестве контейнера выступает уже колонка,
а принцип действия тот же самый.


Ответ 2

Отрицательный отступ у .row для того, чтобы при многоуровневой структуре не суммировались
отступы у блоков разных уровней.


  

    

      

    
  



В приведенном примере блок #inner будет по размеру такой же как блок #outer. Если
бы у row не было отрицательных отступов, то блок #inner был бы меньше блока #outer
на 15px с каждой стороны.

CSS Grid колонки разной высоты

#css #css3 #css_grid #grid_layout

Как расположить колонки разной высоты друг под другом, при помощи Grid? 
Как показано на изображении.



Тут пример кода: 



.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}

.gallery__grid-item {
  background: #000;
}

.gallery__grid-item:nth-child(even) {
  height: 150px;
}

.gallery__grid-item:nth-child(odd) {
  height: 120px;
}

  

  

  

  

  

  





    

Ответы

Ответ 1

Как вы уже поняли CSS Grid позволяет генерировать разметку только с прямоугольными
элементами. Поэтому чтобы у вас получилось, можно поиграться с position: relative и
отрицательными margin.

Пример (будет работать для любого кол-ва строк с элементами):



.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}

.gallery__grid-item {
  background: orange;
  height: 120px;
}

.gallery__grid-item:nth-child(2) {
  height: 135px;
  margin-top: -15px;
}

.gallery__grid-item:nth-child(3n + 2) {
  position: relative;
  top: 15px;
}

.gallery__grid-item:nth-last-child(1),
.gallery__grid-item:nth-last-child(3) {
  height: 135px;
}

  

  

  

  

  

  






Данный пример будет работать корректно, если у нас 3 столбца и кол-во элементов кратно
трём.


Ответ 2

Мне кажется, CSS Grid задумывался не для того что бы играться с марджинами, поставьте
ваши ячейки в нужные строчки или используйте grid-areas.



.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 40px 100px;
  grid-gap: 30px;
}

.gallery__grid-item {
  background: #000;
}

.gallery__grid-item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__grid-item:nth-child(4) {
  grid-row-start: 2;
  grid-row-end: 4;
}

.gallery__grid-item:nth-child(5) {
  grid-row-start: 1;
  grid-row-end: 3;
}

  

  

  

  

  

  






Вариант с регионами


.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 40px 100px;
  grid-gap: 30px;
  grid-template-areas: "a a a" "b b b" "c c c";
  /* называем регионы */
}

.gallery__grid-item {
  background: #000;
}

.gallery__grid-item:nth-child(1) {
  grid-area: 1 / auto / 3 / auto;
  /*grid-area: a / auto / b / auto; тоже самое что и выше*/
}

.gallery__grid-item:nth-child(4) {
  grid-area: 2 / auto / 4 / auto;
  /*grid-area: b / auto / c / auto; тоже самое что и выше*/
}

.gallery__grid-item:nth-child(5) {
  grid-area: 1 / auto / 3 / auto;
  /*grid-area: a / auto / b / auto; тоже самое что и выше*/
}


Ответ 3

Вы можете также сделать это с помощью очень маленьких строк через свойство grid-auto-rows,
задавая каждому элементу нужный row span через свойство griw-row. Результат:



.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 5px;
  grid-auto-flow: row dense;
}

.gallery__grid-item {
  background: orange;
  grid-row: span 24;
  margin-bottom: 15px;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.gallery__grid-item:nth-child(2) {
  grid-row: span 27;
}

.gallery__grid-item:nth-last-child(2),
.gallery__grid-item:nth-last-child(3) {
  margin-bottom: 0;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9





К сожаленью, в данном способе видны два явных минуса:


Из-за смещения, пятый и шестой, восьмой и девятый и т.д. элементы поменялись местами.
Из-за этого пришлось немного менять вёрстку.
Приходится использовать margin вместо grid-gaps для задания промежутка между ячейками.

Для чего нужен отрицательный margin и положительный padding в bootstrap?

Bootstrap'ом редко пользовался, как-то не вникал в эти положительные и отрицательные отступы блоков.
Подскажите, для чего в блоке .container положительный padding, а в блоке .row отрицательный margin? Какая практическая польза в этих отступах?

Ответ

Это сделано для выравнивания.
У каждой колонки слева и справа есть padding, равный 15px. Он нужен для генерации одинакового отступа между колонками. Однако в этом случае отступ слева у первой и отступ справа у последней колонки в строке складывается с отступами контейнера.
Чтобы нивелировать его используется .row с отрицательным margin равным 15px. Если использовать .row, то левый отступ у первого столбца и правый отступ у правого столбца "проваливаются" в уже существующие отступы у контейнера и не занимают дополнительного места.
На вопрос почему бы не убрать отступ у контейнера и отказаться от отрицательного margin у .row ответ простой: блоков с контейнером может быть несколько, и в одном из них может отсутствовать сетка.
Чтобы блоки с сеткой и без нее были выравнены по левой и правой границе, как раз и придумали этот прием с отрицательными margin. А сам padding у контейнера еще нужен и для того, чтобы его содержимое не прилипало к границе экрана на небольших разрешениях.
update: при многократной вложенности, в качестве контейнера выступает уже колонка, а принцип действия тот же самый.

CSS Grid колонки разной высоты

Как расположить колонки разной высоты друг под другом, при помощи Grid? Как показано на изображении.

Тут пример кода:
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; } .gallery__grid-item { background: #000; } .gallery__grid-item:nth-child(even) { height: 150px; } .gallery__grid-item:nth-child(odd) { height: 120px; }

Ответ

Как вы уже поняли CSS Grid позволяет генерировать разметку только с прямоугольными элементами. Поэтому чтобы у вас получилось, можно поиграться с position: relative и отрицательными margin
Пример (будет работать для любого кол-ва строк с элементами):
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; } .gallery__grid-item { background: orange; height: 120px; } .gallery__grid-item:nth-child(2) { height: 135px; margin-top: -15px; } .gallery__grid-item:nth-child(3n + 2) { position: relative; top: 15px; } .gallery__grid-item:nth-last-child(1), .gallery__grid-item:nth-last-child(3) { height: 135px; }

Данный пример будет работать корректно, если у нас 3 столбца и кол-во элементов кратно трём.