Как я могу правильно выровнять время открытия в моей сетке?

Question

Я сделал Codepen: https://codepen.io/coder_extends_human/pen/eLLmgb

Итак, я сделал макет, состоящий из 12 треков. Я всплыл точное время открытия часов вправо, так что это выглядит хорошо. Я хочу, чтобы время открытия совпадало с «IMPRESSUM», но то, как я это сделал, не работает. Я пытался добавить минимальный и максимальный контент к треку, включая время открытия, но он все еще трахается. Сетка CSS все еще очень запутанная, хотя я уже работал над этим вопросом в течение 4 часов: (

Заранее спасибо

.main {
display: grid;
grid-template-columns: repeat(12, 1fr);}

Answer 1

Ваша проблема не относится к Grid;Ваше «Время открытия» и все время находятся в одном элементе контейнера (<section class=five>), и именно этот контейнер является элементом сетки.Контейнер охватывает 3 столбца (и, кстати, вы хотите удалить явный width на section, он заставляет ваш элемент переполнять столбцы), и содержимое затем просто форматируется нормально;им нет дела до внешней сетки.

Итак, используйте обычные механизмы компоновки блоков.Сделайте элемент «Времена открытия» обычным блоком (сейчас он установлен на inline-block) и используйте text-align: right, как подсказывает @Batajus.

Использование инструментов Dev в вашем браузере должно показать этифакты, а также размеры и позиции ваших элементов, достаточно четко;и Chrome, и Firefox будут показывать линии сетки контейнера сетки (так что вы можете сказать, что ваш элемент «Время открытия» никак не соответствует им).

Answer 2

Надеюсь, я правильно понял ваш вопрос, и вы хотели, чтобы текст «Время открытия» был приведен в соответствие с текстом «Impressum».

Вы можете сделать следующее, чтобы получить его:

.f3 {
    text-align: right;
    width: 100%; // Set the width to the width of the parent
}