响应式网格（网格模板列）

Posted 2023-03-06

【中文标题】响应式网格（网格模板列）

【英文标题】：responsive grid (grid-template-columns)

【发布时间】：2021-01-24 21:11:37

【问题描述】：

你好，我已经习惯了 CSS 中的网格并且我已经使用了

display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

很多次，但是如果我希望里面的 div 以特定宽度开始呢？我有这样的东西

<div class="wrapper">
    <div class="right-content">

    </div>
    <div class="left-content">

    </div>
</div>

.wrapper
        width: 100vw;
        height: 100vh
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    

我怎么说.right-content 的起始大小应该是 .wrapper 的 70%，因为如果我做宽度 70%，他会得到模板列属性给他的 1fr 的 70%。 ...有没有办法做到这一点？

【参考方案1】：

如果我们只关注 left 和 right 内容，那么repeat(auto-fit, minmax(...)) 可能过于复杂了。

当 repeat() 函数设置为自动适应或自动填充时，网格容器会在不溢出容器的情况下创建尽可能多的网格轨道（列/行）。

由于我们只需要 2 列，因此您可能正在寻找 grid-template-columns: 1fr minmax(70%, 1fr)。

.wrapper 
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(70%, 1fr);


.right-content 
  background-color: red;


.left-content 
  background-color: blue;

<div class="wrapper">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>