Изменение разметки столбцов шаблона сетки

Question

При определении grid-template-columns в соответствующем родительском div это нормально.

wrapper {
   display:grid;
   grid-template-columns: 1fr 1fr 700px;
}

Но что, если мне нужны только два столбца?

Если я удаляю один из frстолбцы, это будет повреждено.

Так есть ли у сетки минимум fr единиц, если я собираюсь использовать это?Продолжайте, и вы увидите, что 2-й столбец больше не имеет 700px.

wrapper {
   display:grid;
   grid-template-columns: 1fr 700px; /* removing the 1fr defining only 2 columns,
                                        destroys the layout */
}

Простой пример этого здесь: https://codepen.io/theboman/pen/PLRZjB

body {
  padding: 0px;
  margin: 0px;
}

wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 700px;  /* remove 1fr above and you will see */
}

header {
  grid-column-start: 1;
  grid-column-end: 4;
  height: 40px;
  background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
  <header>
    <nav>
      <ul>
        <li>click here</li>
        <li>2nd click here</li>
      </ul>
    </nav>
  </header>
  <aside>
    Aside - content here
  </aside>
  <article>
    some content goes here
  </article>

</wrapper>

Answer 1

Короткий ответ

Когда вы говорите:

wrapper {
   display:grid;
   grid-template-columns: 1fr 1fr 700px;
}

... вы определяете сетку с тремя явными столбцами.

Когдавы переключаетесь на:

grid-template-columns: 1fr 700px

... вы определяете сетку с двумя явными столбцами.

Этот метод представляет только один способ создания столбцов в сетке.

Другой способ - через неявные столбцы, которые вы делаете со свойствами grid-column-start и grid-column-end.

header {
  grid-column-start: 1; 
  grid-column-end: 4;
}

aside {
  grid-column-start: 1; 
  grid-column-end: 3;
}

article {
  grid-column-start: 3; 
  grid-column-end: 4;
}

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

---

Подробнее о явных и неявных сетках

и явных сетках - это сетка, которую вы явно определяете.Явная сетка создается при использовании следующих свойств:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid (что является сокращением для трех указанных выше свойств, среди прочих )

Однако вы не обязаны хранить элементы сетки в явной сетке.Вы можете по существу размещать элементы и создавать области сетки где угодно, даже вне явной сетки.Вот тут и появляется неявная сетка.

Неявная сетка создается строками и столбцами, которые автоматически генерируются для размещения элементов сетки, которые расположены за пределами явной сетки.Это может произойти с позиционным размещением с использованием таких свойств, как grid-column-start, grid-row-end и сокращений, таких как grid-column и grid-row.

В то время как явные дорожки grid-template-columns и grid-template-rows, неявные дорожки grid-auto-columns и grid-auto-rows.

---

Ссылка

Вот как спецификация определяетэти типы сетки:

7.1.Явная сетка

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку контейнера сетки.

* gridсвойство - это сокращение, которое можно использовать для одновременной установки всех трех.

Конечная сетка может в конечном итоге увеличиться из-за элементов сетки, размещенных вне явной сетки;в этом случае будут создаваться неявные дорожки, размер этих неявных дорожек определяется свойствами grid-auto-rows и grid-auto-columns.

---

7.5.Неявная сетка

Свойства grid-template-rows, grid-template-columns и grid-template-areas определяют фиксированное количество дорожек, образующих явную сетку.

Когда элементы сеткирасположены за пределами этих границ, контейнер сетки генерирует неявные дорожки сетки, добавляя неявные линии сетки в сетку.

Эти линии вместе с явной сеткой образуют неявную сетку.

* grid-auto-rows и grid-auto-columns свойства определяют размер этих неявных дорожек сетки.

Answer 2

Это потому, что для кода grid-column-start и grid-column-end установлены значения для header, aside и article - см. Демонстрацию ниже, где он работает для grid-template-columns: 1fr 700px с некоторыми изменениями в значениях grid-column :

body {
  padding: 0px;
  margin: 0px;
}

wrapper {
  display: grid;
  grid-template-columns: 1fr 700px;
}

header {
  grid-column-start: 1;
  grid-column-end: 3; /* CHANGED */
  height: 40px;
  background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px;
}

aside {
  grid-column-start: 1;
  grid-column-end: 2; /* CHANGED */
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  grid-column-start: 2; /* CHANGED */
  grid-column-end: 3; /* CHANGED */
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
  <header>
    <nav>
      <ul>
        <li>click here</li>
        <li>2nd click here</li>
      </ul>
    </nav>
  </header>
  <aside>
    Aside - Map content here
  </aside>
  <article>
    some content goes here
  </article>
</wrapper>

Answer 3

Проблема в том, что вы определяете grid-column-*, который сломается, если вы измените число или структуру ваших столбцов.Чтобы избежать этого, просто удалите их, и браузер автоматически разместит ваши элементы.

Вам нужно только указать, что первый должен охватывать всю первую строку:

body{
  padding:0px;
  margin:0px;
}

wrapper {
  display:grid;
  grid-template-columns: 1fr 700px;
}

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>

Чтобы это работало в обоих случаях, необходимо указать, что элемент article должен быть помещен в последний столбец, а элемент aside должен начинаться спервый до последнего:

body{
  padding:0px;
  margin:0px;
}

wrapper {
  display:grid;
  grid-template-columns: 1fr 300px;
}

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  grid-column: 1/-2;
  background-color: #7fa7e8;
}

article {
  grid-column-end: -1;
  background-color: #7ee8cc;
}

<wrapper>
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>

<wrapper style="grid-template-columns: 1fr 1fr 300px;">
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>