@Dryzhkov

Как расположить элементы на гридах?

Проблема с грид сеткой необходимо сделать такое расположение элементов в 2 строки,
5f752e7d8c00f524999095.jpeg
но мешается 4я колонка
5f752e8e0c189236755156.jpeg
каким образом можно это исправить? спасибо
Вот собственно css :
display: grid;
      justify-content: center;
      margin: 0 auto;
      grid-template-columns: repeat(4,180px) ;
      max-width: 795px;
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
JamesHatfield
@JamesHatfield
Front-end developer
Структура будет такая, но это реально лучше на flex сверстать.

<div class="mainB">
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
		  <div class="main"></div>
      </div>


.mainB{
	display: grid;
	grid-template-columns: repeat(8, 2fr);
	grid-template-rows: 2fr 2fr;
	grid-template-areas:
	"a a b b c c d d"
	". e e f f g g .";
	grid-gap: 10px;
	background-color: #999;
	width: 100%;
	height: 100vh;
}

.main{
	background-color: red;
}

.main:nth-of-type(1){
	grid-area: a;
}

.main:nth-of-type(2){
	grid-area: b;
}

.main:nth-of-type(3){
	grid-area: c;
}

.main:nth-of-type(4){
	grid-area: d;
}

.main:nth-of-type(5){
	grid-area: e;
}

.main:nth-of-type(6){
	grid-area: f;
}

.main:nth-of-type(7){
	grid-area: g;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
31 окт. 2020, в 14:17
1000 руб./в час
31 окт. 2020, в 14:00
1000 руб./в час
31 окт. 2020, в 13:31
60000 руб./за проект