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

Question

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

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

我想要它做什么：

• 我正在努力使内容区域始终保持最小宽度

现在发生了什么：

• “宽”总是在它的“最大”

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