Как изменить порядок столбцов сетки CSS? - PullRequest
Новая
       43

Как изменить порядок столбцов сетки CSS?

3 голосов
/ 26 марта 2019

Я хочу иметь возможность изменить порядок столбцов (2 маленьких слева, большой справа).Я пробовал несколько решений, но не нашел того, которое работает.

enter image description here

Вот код: 

.images-block-box{

    display: grid;
    grid-gap: 16px;
    grid-template-columns: 708fr 340fr;

    & > div:first-child{
      grid-row: span 2;
    }

    &.reverse{
      grid-template-columns: 340fr 708fr;

      & > div:first-child{
         order: 2; // doesn't work (I want to place the first item at the end of the 3)
      }
    }// reverse

}// images-block-box

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

Ответы [ 4 ]

5 голосов
/ 26 марта 2019

Просто настройте grid-column и conisder grid-auto-flow:dense;, чтобы разрешить размещение следующих элементов перед: 

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 2fr 1fr;
  grid-auto-flow:dense;
  margin:5px;
}

.grid div {
  min-height: 50px;
  border: 1px solid;
}

.grid div:first-child {
  grid-row: span 2;
}

.grid.reverse {
  grid-template-columns: 1fr 2fr;
}

.grid.reverse div:first-child {
  grid-column:2;
}
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

плотны

Если указано, алгоритм автоматического размещения использует «плотный» алгоритм упаковки, который пытается заполнить отверстия раньше в сетке, если более мелкие элементы появятся позже . Это может привести к тому, что элементы будут отображаться не в порядке, при этом будут заполнены отверстия, оставленные более крупными элементами. ref

1 голос
/ 26 марта 2019

Поскольку есть 2 ответа, которые можно пометить как принятые (спасибо @kukkuz и @Temani Afif), я выкладываю здесь сумму.Методы работы, указанные до сих пор:

  • grid-auto-flow: dense (container) + grid-column: 2 (first-child)
  • grid-auto-flow: column (container) + grid-column-end: -1 (first-child)

Остальная часть кода остается прежней.Пожалуйста, взгляните на соответствующие ответы.

Оба в настоящее время работают хорошо (по крайней мере, в основных / современных браузерах).

1 голос
/ 26 марта 2019

Другой вариант - поместить большой блок в последний столбец с помощью grid-column-end: -1 - см. Демонстрацию ниже: 

.images-block-box {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 708fr 340fr;
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
}

.images-block-box>div {
  border: 1px solid;
}

.images-block-box>div:first-child {
  grid-row: span 2;
}

.images-block-box.reverse {
  grid-template-columns: 340fr 708fr;
}

.images-block-box.reverse>div:first-child {
  grid-column-end: -1;
}
<div class="images-block-box">
  <div></div>
  <div></div>
  <div></div>
</div>
<br/>
<div class="images-block-box reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

grid-column-end

<integer> && <custom-ident>?

Вносит n-ю линию сеткина размещение элемента сетки.Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки.

0 голосов
/ 26 марта 2019

Тогда, может быть, вы можете использовать другой подход 

.grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-template-rows: 1fr 1fr;
    height: 500px;
    grid-gap: 2rem;
}

.one {
    background-color: red;
    grid-row: 1 / 3;
}

.two {
    background-color: green;
}

.three {
    background-color: blue;
}

.reverse > .one {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.reverse > .three {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
<h1>Without Reverse</h1>

<div class="grid">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

<h1>With Reverse</h1>


<div class="grid reverse">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
...