Как я могу установить ширину и максимальную ширину столбца сетки CSS?

Question

Можно ли ограничить ширину столбца сетки CSS?

body {
  margin: 0;
  padding: 0;
}
.container {
    display: grid;
    grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
    grid-template-rows: 100vh;
    grid-gap: 0;
}
.menu {
    padding-top: 32px;
    background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
    background-color: #F5F5FC;
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>

В приведенном выше примере для меню всегда используется ширина 17,5%, поскольку:

"Если max меньше min,тогда max игнорируется, а функция обрабатывается как min. "

source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

Мне нужно меню шириной 17,5% с максимальным значением 250 пикселей.Это возможно?

Answer 1

Одним из способов сделать это может быть объявление:

.container {grid-template-columns: 250px 480px auto;}

в качестве стандартного правила.

Затем, рассмотрев минимальную ширину, которую вы хотели бы применить к третьему столбцу, выможно применить запрос @media.

Допустим, вы хотите убедиться, что ваш третий столбец не меньше 100px.

250px + 480px + 100px = 830px

Так что вам нужно написать запрос @mediaдля 830px:

@media only screen and (max-width: 830px) {

    .container {grid-template-columns: 17.5% 31.25% auto;}
}

Рабочий пример:

body {
  margin: 0;
  padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 250px 480px auto;
    grid-template-rows: 100vh;
    grid-gap: 0;
}

.menu {
    padding-top: 32px;
    background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}

.list-view {
    background-color: #F5F5FC;
}

@media only screen and (max-width: 830px) {
    
    .container {grid-template-columns: 17.5% 31.25% auto;}
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>

Answer 2

Вы хотите, чтобы ваша колонка имела стандартную ширину 17,5% и максимальную ширину 250 пикселей.

Вы не можете использовать grid-template-columns, потому что функция minmax() вычисляется в min в любое время max меньше min. Это означает, что 17,5% переопределят 250px на более широких экранах.

Чистым обходным решением было бы установить grid-template-columns на min-content, который сжимает столбец до длины содержимого. Затем установите параметры ширины для элемента сетки.

.container {
  display: grid;
  grid-template-columns: min-content minmax(31.25%, 480px) auto;
}

.menu {
  width: 17.5%;
  max-width: 250px;
}

Однако процентная длина элемента сетки в этом сценарии не работает, поскольку родительская ссылка (столбец) по существу установлена ​​на нулевую ширину (min-content). ( демонстрация скрипки ).

К счастью, в этом случае, поскольку ваш контейнер настроен на ширину области просмотра, вы легко можете решить эту проблему с помощью vw единиц вместо

.menu {
  width: 17.5vw;
  max-width: 250px;
}

.container {
  display: grid;
  grid-template-columns: min-content minmax(31.25%, 480px) auto;
  grid-template-rows: 100vh;
  grid-gap: 0;
}

.menu {
  width: 17.5vw;
  max-width: 250px;
  padding-top: 32px;
  background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}

.list-view {
  background-color: #F5F5FC;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>

jsFiddle demo

Answer 3

Не уверен, возможно ли это таким образом, но альтернативой является использование flexbox вместо CSS-сетки, и вы легко можете добиться этого:

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.menu {
  width: 17.5%;
  max-width: 250px;
  padding-top: 32px;
  background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}

.list-view {
  width: 32.25%;
  max-width: 480px;
  background-color: #F5F5FC;
}

.details {
  flex: 1;
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>