2

.inner-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1em;
  color:white;
}

.box1,
.box2,
.box3,
.box4 {
  background-color: #0030ff;
}
<div class="row">
  <div class="content">
    <div class="inner-content">
      <div class="box1">box-1</div>
      <div class="box2">box-2</div>
      <div class="box3">box-3</div>
      <div class="box4">box-4</div>
    </div>
  </div>

  <div class="sidebar-2">
    <div class="inner-sidebar-1">САЙТБАР-1</div>
  </div>
</div>

Как переместить box-3,4 под box-1,2. Что бы они шли вот так:

box1 box-2
box3 box-4

введите сюда описание изображения

1
  • grid online generator css набери в поисковике.. там быстро разберешься как это сделать 29 мар 2020 в 15:35

3 ответа 3

4

Можно разграничить себе блоки в grid и уже вставлять нужные элементы в нужные ячейки:

.grid {
    display: grid;
    grid-template: [start] "post-1 post-1 post-1 post-1 post-1 post-1" 25%[row2]
    [row2] "post-2 post-2 post-3 post-3  post-6 post-6"  25% [row3]
    [row3] "post-4 post-4 post-5 post-5  post-6 post-6"  25% [row4]
    [row5] "post-7 post-7 post-8 post-8 post-9 post-9" 25% [row6]
    [row6] "post-10 post-10 post-10 post-10 post-10 post-10" 25% [row-end] / 1fr 1fr 1fr 1fr 1fr 1fr;
}
.header {
    background-color: #d79bfe;
    grid-area: post-1;
    text-align: center;
}
.box1 {
    grid-area: post-2;
    background-color: #4280ed;
    text-align: center;
}
.box2 {
    grid-area: post-3;
    background-color: #1d64ed;
    text-align: center;
}
.box3 {
    grid-area: post-4;
    background-color: #1443ed;
    text-align: center;
}
.box4 {
    grid-area: post-5;
    background-color: #0b16ed;
    text-align: center;
}
.sidebar {
    grid-area: post-6;
    background-color: #a70fed;
    text-align: center;
}
.text1 {
    grid-area: post-7;
    background-color: #edb881;
    text-align: center;
}
.text2 {
    grid-area: post-8;
    background-color: #edc353;
    text-align: center;
}
.text3 {
    grid-area: post-9;
    background-color: #edc032;
    text-align: center;
}
.footer {
    grid-area: post-10;
    background-color: #63ed66;
    text-align: center;
}
<div class="grid">
    <div class="header">Header</div>

    <div class="box1">Бокс1</div>
    <div class="box2">Бокс2</div>
    <div class="box3">Бокс3</div>
    <div class="box4">Бокс4</div>
    <div class="sidebar">CайтБар</div>

    <div class="text1">Текст 1</div>
    <div class="text2">Текст 2</div>
    <div class="text3">Текст 3</div>
    <div class="footer">Тут футер</div>
</div>

1
  • Отличный, полезный ответ, как практическое учебное пособие 7 апр 2020 в 8:12
1

.inner-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1em;
  color: white;
}

.box1,
.box2,
.box3,
.box4 {
  background-color: #0030ff;
}
<div class="row">
  <div class="content">
    <div class="inner-content">
      <div class="box1">box-1</div>
      <div class="box2">box-2</div>
      <div class="box3">box-3</div>
      <div class="box4">box-4</div>
    </div>
  </div>

  <div class="sidebar-2">
    <div class="inner-sidebar-1">САЙТБАР-1</div>
  </div>
</div>

0
.inner-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.