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

Question

Я хотел бы иметь сетку с 1-м столбцом 50px, последний с 50px тоже и все столбцы посередине (не знаю количество столбцов), чтобы иметь 1fr.

Я пробовал с grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px;, но безуспешно.

body {
    font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container {
    background:peru;
    padding:10px;
    display:grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr));

    /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}
.container div {
    background:#f0ff00;
    margin:5px;
    padding:5px;
    text-align: center;
    color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

https://jsfiddle.net/gb1knso0/

Answer 1

Я сделал это с помощью дисплея flex.Дав им все flex:1 они одинаковы, а для первого и последнего мы устанавливаем ширину:

.container{
      background:peru;
      padding:10px;
      display:flex;
}

.container div{
  flex: 1;
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}
.container div:first-child,
.container div:last-child{
  width: 50px;
  flex: none;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

Обратите внимание:
- я удалил два элемента, чтобы улучшить демо,
- первый / последний элемент имеют ширину 60 из-за отступов.Если вам 50 в качестве конечного результата, либо сделайте его width:40px или box-sizing:border-box

Answer 2

Вы можете использовать grid-template-columns: 50px auto 50px для container div, а затем поместить внутреннее неизвестное число div в другой div и установить display: grid этого div для хранения дочерних div.

Working JsFiddle: https://jsfiddle.net/7mgnaf5L/

PS Вы можете использовать display: inline для дочерних элементов div, если вы хотите, чтобы они были в одной строке.

Редактировать 1: Попробуйте установить ширину 50px дочерних элементов и установить grid-auto-flow: columnдля основного дел.

https://jsfiddle.net/1p4sdt9y/

Answer 3

Проблема связана с вашим 100px (в узких макетах он становится слишком большим для значения min, что вынуждает макет сетки разрываться).

Вы должны использовать calc((100% - 100px)/6) как min.

body{
  font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container{
      background:peru;
      padding:10px;
      display:grid;
      grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/6), 1fr)) 50px;
      
      /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}

.container div{
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

... где 6 - количество столбцов - 2. Вы говорите, что «любое количество столбцов» , но вDOM это очень точное количество столбцов.При необходимости (пере) вычислите его, когда страница будет перерисована, используя JavaScript.Или используйте 0 как минимум.

---

Вот скрипт JavaScript, который вычисляет правильное значение gridTemplateColumns и применяет его:

Array.from(document.querySelectorAll('.container')).forEach(c => {
  const s = `50px repeat(auto-fit, minmax(calc((100% - 100px)/${c.childElementCount - 2}), 1fr)) 50px`;
  c.style.gridTemplateColumns = s;
  
  // the next bit just displays the styles in the titles. so you can remove from here...
  const h3 = document.createElement('h3');
  h3.innerText = `grid-template-columns: ${s};`;
  c.parentElement.insertBefore(h3, c)
  // ...until here.

});

body{
  font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
h3{
  text-align:center;
}
.container{
  background:peru;
  padding:10px;
  display:grid;
}

.container div{
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}

<div class="container opt1">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

<div class="container opt2">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item4">Item 8 - 1fr</div>
  <div class="item5">Item 9 - 1fr</div>
  <div class="item6">Item 10 - 1fr</div>
  <div class="item7">Item 11 - 1fr</div>
  <div class="item8">Item 12 - 50px</div>
</div>

<div class="container opt3">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item7">Item 4 - 1fr</div>
  <div class="item8">Item 5 - 50px</div>
</div>