如何使内容区域占据其最大宽度的整个宽度

Question

我有一个看起来像这样的 CSS 网格，

full-start | wide-start | content-start | content-end | wide-end | full-end

我想要它做什么：

• 我正在努力使内容区域始终具有最大宽度，它的最大宽度为 77rem (1232px)。虽然屏幕变宽也应该相应地缩小并最终变宽并且内容会相互赶上，如果这有意义的话？ So Wide 应该“首先”缩小，因为他们最终会再次赶上。

现在发生了什么：

• “宽”始终处于“最大”并且根本不会缩小。我希望“内容”始终保持其最大宽度，而“宽度”首先缩小。

总结：
我希望“内容”首先保持其最大宽度和“宽度”收缩。

.my-grid {
  --const-content: 77rem;
  --const-max-inline-size: 90rem;
  
  --gutter: 4rem;
  --content: minmax(0, var(--const-content));
  --wide: minmax(0, calc((var(--const-max-inline-size) - var(--const-content)) / 2));
  --max-inline-size: calc(var(--const-max-inline-size) + (var(--gutter) * 2));
    
  display: grid;
  grid-template-columns: [full-start] var(--gutter) 
                         [wide-start] var(--wide) 
                         [content-start] var(--content) [content-end] 
                         var(--wide) [wide-end] 
                         var(--gutter) [full-end];
  max-inline-size: var(--max-inline-size);
}

.block {
  padding: 2rem;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}

.block--content {
  grid-column: content;
  background-color: lightgreen;
}

.block--wide {
  grid-column: wide;
  background-color: lightblue;
}

.block--full {
  grid-column: full;
  background-color: lightgray;
}

<div class="my-grid">
  <div class="block block--full">full</div>
  <div class="block block--content">content</div>
  <div class="block block--wide">wide</div>
</div>

Answer 1

不是一个很明确的问题，但是如果您希望

.block--content

具有最小宽度，请将

place-self

添加到

.block--content

：

.my-grid {
  --const-content: 77rem;
  --const-max-inline-size: 90rem;
  
  --gutter: 4rem;
  --content: minmax(0, var(--const-content));
  --wide: minmax(0, calc((var(--const-max-inline-size) - var(--const-content)) / 2));
  --max-inline-size: calc(var(--const-max-inline-size) + (var(--gutter) * 2));
    
  display: grid;
  grid-template-columns: [full-start] var(--gutter) 
                         [wide-start] var(--wide) 
                         [content-start] var(--content) [content-end] 
                         var(--wide) [wide-end] 
                         var(--gutter) [full-end];
  max-inline-size: var(--max-inline-size);
}

.block {
  padding: 2rem;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}

.block--content {
  grid-column: content;
  background-color: lightgreen;
  place-self: center; /* 👈 */
}

.block--wide {
  grid-column: wide;
  background-color: lightblue;
}

.block--full {
  grid-column: full;
  background-color: lightgray;
}

<div class="my-grid">
  <div class="block block--full">full</div>
  <div class="block block--content">content</div>
  <div class="block block--wide">wide</div>
</div>