时间戳

首页 > 解决方案 > CSS Grid minmax - 需要验证，请

css - CSS Grid minmax - 需要验证，请

问题描述

我正在尝试以下我需要响应的网格布局。包含的文本的宽度必须最大为 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>

标签： csscss-grid

解决方案

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

推荐阅读