Как использовать justify-content: end в сочетании с 1fr в сетках CSS? - PullRequest
Новая
       34

Как использовать justify-content: end в сочетании с 1fr в сетках CSS?

2 голосов
/ 02 августа 2020

Я понимаю, что fr рассчитывается на основе доступного места в контейнере сетки. У меня есть ситуация, когда у меня есть контейнер сетки, который я хочу разделить на 5 столбцов. Однако дочерние элементы генерируются динамически, и в зависимости от ситуации это может быть 3 дочерних элемента, 4 или 5 элементов. Я все еще хочу сохранить сетку из 5 столбцов без изменений с указанным grid-column-gap, но я хочу, чтобы сетка начала заполнять элементы справа. Пожалуйста, посмотрите мой код ниже: https://codepen.io/skepticacid/pen/dyGxaJb

<html>
  <body>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
      <div class = "grid-child">5</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
    </div>
  </body>
</html>

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1rem;
  justify-content: end;
  align-items: center;
  padding: 1rem;
  margin-bottom: 2rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

5 элементов - это счастливый путь. Однако, когда дело доходит до 4 или 3 элементов, я хочу, чтобы они были выровнены так же, как justify-content: end или flex-end (поэтому в примере с 4 столбцами я хочу, чтобы номер div 4 был выровнен с номером div 5 выше). Кроме того, я также хочу сохранить ширину столбца, чтобы она соответствовала ширине 5 столбцов.

Возможно ли это через сетку CSS? Извините, если я упустил что-то очевидное.

Ответы [ 3 ]

3 голосов
/ 02 августа 2020

Нет такого свойства обратного потока в CSS -Grid.

Одно решение (которое плохо масштабируется) - использовать nth-last-child в этой ситуации, чтобы укажите, какой столбец требуется. 

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: .25rem;
  padding: 1rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

.grid-child:nth-last-child(1) {
  grid-column:5;
}
.grid-child:nth-last-child(2) {
  grid-column:4;
}
.grid-child:nth-last-child(3) {
  grid-column:3;
}

.grid-child:nth-last-child(4) {
  grid-column:2;
}
.grid-child:nth-last-child(5) {
  grid-column:1;
}
<html>

<body>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
    <div class="grid-child">5</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
  </div>
</body>

</html>
0 голосов
/ 03 августа 2020

Мы можем использовать auto-fit, который создает столбцы только при необходимости, в отличие от auto-fill и текущей настройки, которая создает столбцы даже тогда, когда они не нужны.

Это будет работать, если мы знаем максимальное количество столбцов у нас будет go с 5.

Наш grid-template-columns becomes вот так: 

grid-template-columns: repeat(auto-fit, minmax(0px,calc((100% - ( .25rem * 4)) / 5)));

Вместо предопределенных 5 столбцов мы вычисляем 5 столбцов из ширины родительского элемента, вычитая grid-gap

И, наконец, мы применяем justify-content: flex-end;

.grid-container {
    background-color: coral;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0,calc((100% - ( .25rem * 4)) / 5)));
    grid-gap: .25rem;
    padding: 1rem;
    justify-content: flex-end;
}

.grid-child {
    background-color: saddlebrown;
    color: white;
    padding: 1rem;
}
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
  <div class="grid-child">5</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
</div>
0 голосов
/ 02 августа 2020

введите описание изображения здесь Если вы хотите, чтобы это было так 

direction: rtl;

Если проблема с направлением, надеюсь, она ее решит.

последний ответ: 

justify-items: center;

Не имеет значения .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...