CSS Grid minmax - 需要验证，请

Question

我正在尝试以下需要响应的网格布局。所包含文本的宽度必须最大为 890 像素，并调整大小以适应手机。

我做了一些实验，“minmax(auto, 890px)”似乎有效 - 在 Chrome 开发工具、Microsoft Edge 和 Firefox 上进行了测试。

但是我怀疑这是正确的方法，因为我在任何地方都没有找到任何线索。我做对了吗？有更好更合适的方法来实现这一点吗？

CSS

article {
    display: grid;
    grid-template-columns: 1fr 1fr 0px minmax(auto, 890px) 0px 1fr 1fr;
    margin: 15vh 0 15vh 0 /* margin top and bottom of whole content */
}

article > * {
    grid-column: 4;
}

article > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}

.container {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto
}

HTML

<div class="container">

<article>


        <h2>Lorem ipsum</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <figure>
            <img src="https://mave.me/img/projects/full_placeholder.png">
        </figure>

        <h2>More lorem ipsum</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</article>

</div>

Answer 1

正确的方法是使用断点，并为不同的断点编写专用的 css。请参阅here 以供参考。 对于文章，您还可以设置 width: 100% 或其他任何值和 max-width: 890px 以自动调整宽度。