Блог

У меня есть сетка, в которой у меня два столбца и три строки, но первый столбец охватывает все 3 строки. Первый столбец содержит текст, второй столбец содержит 3 строки текста, по одной на строку.

Я хочу, чтобы высота столбца 1 соответствовала высоте столбца 2 в зависимости от цвета фона элементов содержимого сетки.

Это прекрасно работает, если я рад, что левый столбец выровнен в верхней части 3 строк. Но когда я пытаюсь выровнять его по вертикали, используя align-self, цвет фона уменьшается, чтобы покрыть только одну строку.

Возможно, в JSFiddle это будет сказано более четко, чем в моем описании.

HTML:

 <div class="wrapper">

  <div class="box title1">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

  <div class="wide">amp;nbsp;</div>

  <div class="box title2">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

</div>
 

CSS:

 body {
  margin: 20px;
  font-family: "Garamond", "Times New Roman", serif;
}

.box {
  background-color: lightgrey;
  padding: 5px;
}

.wrapper {
  display: grid;
  grid-template-columns: 8em 8em;
}

.wide {
  grid-column: span 2;
}

.title1 {
  grid-row: span 3;
  font-size: 150%;
  font-weight: bold;
}

.title2 {
  grid-row: span 3;
  align-self: center;
  font-size: 150%;
  font-weight: bold;
}
 

Ссылка на JSFiddle

Как я могу выровнять метку по вертикали, но также подобрать высоту цвета фона? Я попытался добавить атрибуты, такие как «высота:100%;», ко второму названию, но все меняется немного по-другому. Я использую Firefox, но, конечно, мне нужно кроссбраузерное решение, насколько это возможно.

Сделайте элемент display:flex , а затем align-items:center

 body {
  margin: 20px;
  font-family: "Garamond", "Times New Roman", serif;
}

.box {
  background-color: lightgrey;
  padding: 5px;
}

.wrapper {
  display: grid;
  grid-template-columns: 8em 8em;
}

.wide {
  grid-column: span 2;
}

.title1 {
  grid-row: span 3;
  font-size: 150%;
  font-weight: bold;
}

.title2 {
  grid-row: span 3;
  display: flex;
  align-items: center;
  font-size: 150%;
  font-weight: bold;
} 

 <div class="wrapper">

  <div class="box title1">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

  <div class="wide">amp;nbsp;</div>

  <div class="box title2">Text</div>
  <div class="box">Question 1</div>
  <div class="box">Question 2</div>
  <div class="box">Question 3</div>

</div>