Блог

Главная - Вопросы по программированию - CSS grid — выравнивание двух строк с разным количеством столбцов

CSS grid — выравнивание двух строк с разным количеством столбцов

#css #flexbox #css-grid

#css #гибкий ящик #css-сетка #flexbox

Вопрос:

У меня есть вопрос, связанный с CSS grid. Допустим, у меня есть 2 строки:

Первая строка:

 <div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

Вторая строка:

 <div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class"SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col 4</span>
  </div>

</div>

Как я могу разделить последний div элемент во второй строке, чтобы содержимое из первой строки было идеально выровнено с содержимым из второй (например, если бы они были идентичными строками по структуре).

CCS, которые я использовал:

 .first-row {
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-content: center;
   text-align: center;
}

Ответ №1:

Я бы реализовал то, что называется «Подсетка» или «Уровень сетки 2».

В то время как контейнер, в котором находятся обе ваши начальные строки внутри, определен в CSS с помощью ‘display: grid;’, определите свой ‘SPLIT-THIS’ с помощью отдельного ‘display: grid;’. Затем используйте ‘grid-template-rows: 50%, 50%;’ также для ‘SPLIT-THIS’.

Ответ №2:

  • Первый вариант / подход: оба контейнера должны иметь одинаковое количество столбцов и одинаковый размер, чтобы визуально соответствовать.

Затем разделяемый элемент должен охватывать 2 столбца и сам быть контейнером сетки.

 .first-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.second-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.SPLIT-THIS {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

div,
.SPLIT-THIS span {
  box-shadow: inset 0 0 0 1px
}  
 <div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>

  • Другие варианты — переопределить шаблоны столбцов сетки, если вы хотите, чтобы было только 3 столбца

 .first-row {
  display:grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   justify-content: center;
   text-align: center;
}

.second-row {
  display:grid;
   grid-template-columns: 1fr 1fr 2fr ;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.SPLIT-THIS{
   display:grid;
  grid-template-columns:repeat(2,1fr);
}
div, .SPLIT-THIS span {box-shadow:inset 0 0 0 1px}  
 <div class="first-row">

  <div>
    Col 1
  </div>

  <div>
    Col 2
  </div>

  <div>
    Col 3
  </div>

  <div>
    Col 4
  </div>

</div>

<div class="second-row">

  <div>
    <span>Under Col 1</span>
  </div>

  <div>
    <span>Under Col 2</span>
  </div>

  <div class="SPLIT-THIS">
    <span>Under Col 3</span>
    <span>Under Col </span>
  </div>

</div>