时间戳

首页 > 解决方案 > 2列CSS网格，直到一定宽度

html - 2列CSS网格，直到一定宽度

问题描述

我正在尝试为 CSS 网格建模

我希望它是 2x2

xx yy
ww zz

虽然屏幕的宽度至少为 N，但我希望每个单元格占据 50% 的宽度，中间有一个间隙。

xxxx yyyy
wwww zzzz

当屏幕达到某个最小宽度时，我希望网格堆叠

x 
y
w
z

如果我从这个网格开始

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}
.grid-item {
  width: 100%;
  height: 100%;
}


<div class="grid">
  <div class="grid-item"/>
  <div class="grid-item"/>
  <div class="grid-item"/>
  <div class="grid-item"/>
</div>

网格总是垂直堆叠，因为永远不会有足够的空间容纳 2 个 50% 的单元格，具有 32px 的静态列间隙。

如果我将其更改为

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

然后网格将是 2x2，直到某个最小屏幕宽度，它们将垂直堆叠。这是我想要的行为，除了网格垂直堆叠似乎有些意外之外，因为它只是由于grid-column-gap. 我实际上并没有为我的网格单元定义最小宽度，它只是导致我的列间隙占用超过 2% 空间的任何宽度。

如果我想明确定义网格折叠的像素限制怎么办？如果我想要这种行为而没有列间隙怎么办？

标签： htmlcssresponsive-designcss-grid

解决方案

也许解决这个问题的好方法是使用 CSS 的媒体查询和百分比。您可以使用如下代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            .grid{
                width:100%;
            }
            @media only screen and (min-width: 600px) {
                .grid-item {
                    display:inline-block;
                    width:46%;
                    padding: 1%;
                }
            }

            @media only screen and (max-width: 599px) {
                .grid-item {
                    width:100%;
                    display:block;
                    padding: 32px;
                 }
            }
        </style>
 </head>
<body>

    <div class="grid">
        <div class="grid-item">one</div>

        <div class="grid-item">two</div>

        <div class="grid-item">three</div>

        <div class="grid-item">four</div>
    </div>

</body>

另一种更简单的方法可能是使用Bootstrap 的网格，但由于您的问题没有 Bootstrap 标签，所以我没有提到它。

推荐阅读