如何设置CSS网格列的宽度和最大宽度？

Question

是否可以限制CSS网格列的宽度？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在上面的例子中，它总是使用17.5％的宽度作为菜单，因为：

  

＆＃34;如果max小于min，则忽略max并且函数为   被视为最小值。＆＃34;

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

我想要的是宽度为17.5％，最大为250px的菜单。这可能吗？

Answer 1

您希望色谱柱的标准宽度为17.5％，最大宽度为250px。

您无法使用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）。 （fiddle demo）。

幸运的是，在这种情况下，由于您的容器设置为视口的宽度，因此您可以使用vw单位轻松解决此问题。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo

Answer 2

我不确定它是否可行，但另一种方法是使用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>

Answer 3

执行此操作的一种方法可能是声明：

.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;}
}

工作示例：

＆＃13;

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;