0

Как правильно задавать последнюю позицию колонке в ряду, если grid-column-start: -1; создает дополнительную (6) колонку с минимальной шириной?

Получилось выполнить задачу через grid-column-start: -2;, но насколько это правильно?

.wrapper { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  grid-auto-rows: 100px; 
} 
* {box-sizing: border-box;}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > :nth-child(1)
{
  background: blue;
  grid-column-start: -1;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
<div class="wrapper">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box1">6</div>
  <div class="box2">7</div>
  <div class="box3">8</div>
  <div class="box4">9</div>
  <div class="box5">10</div>
</div>

1 ответ 1

1

Лучше через grid-column-start: 5;:

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 100px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper> div:nth-child(1) {
  background: blue;
  grid-column-start: 5;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
<div class="wrapper">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box1">6</div>
  <div class="box2">7</div>
  <div class="box3">8</div>
  <div class="box4">9</div>
  <div class="box5">10</div>
</div>

Если не известно точное количество колонок?

Тогда grid-column-start: -2;, так как отрицательные привязывают с конца.

grid-column-start: -1; привяжет к последний линии и создаст дополнительную колонку.

grid-column-start: -2; привяжет к предпоследней, что соответствует началу последней колонке.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 100px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper> div:nth-child(1) {
  background: blue;
  grid-column-start: -2;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
<div class="wrapper">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
  <div class="box1">6</div>
  <div class="box2">7</div>
  <div class="box3">8</div>
  <div class="box4">9</div>
  <div class="box5">10</div>
</div>

2
  • Если не известно точное количество колонок? 16 мар 2018 в 8:05
  • тогда grid-column-start: -2;
    – Kniha m
    16 мар 2018 в 8:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.