如何使2列中的第一项成为响应式网格？

问题描述 投票：1回答：1

请考虑以下代码段：

<html>

<head>
  <style type="text/css">
    .container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      background-color: #aaaaaa;
      padding: 10px;
    }
    
    .item {
      padding: 40px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
  </div>
</body>

</html>

我正在学习css＆html的基础知识，我正在尝试实现下一个效果：

  • 我希望网格中的第一项居住在2个“列”中。此项目应该是一个同时包含文本，链接和一些漂亮边框的框（显然，文本不应超出边距）
  • 整个网格应该变得敏感...因此当您缩小页面时，列数会减少，但绝不会少于2列，这样您就可以看到第一个项目（其中包含整个描述）

您将如何编码这种类型的布局？

html css grid
1个回答
2
投票

希望这会清除一些grid行为。有关网格基础的更多信息

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.