css gird 固定大小自动换行

给你取暖

已于 2023-02-22 16:29:33 修改

阅读量944

点赞数

分类专栏： css js 文章标签： vue.js 前端 Powered by 金山文档

于 2023-01-19 14:44:29 首次发布

本文链接：https://blog.csdn.net/weixin_49409651/article/details/128734954

版权

js 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

此HTML代码展示了如何使用CSSGrid创建不同类型的布局。包括一个带有3列200px宽的网格布局和两个不同的卡片布局，分别用grid-template-areas定义。布局涉及到间距、单元格大小以及对齐方式的设置。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: grid;

        /* grid-template-columns: repeat(3, 1fr);  */
        grid-template-columns: repeat(3, 200px);
        justify-content: space-between;
        grid-template-rows: 71px;
        grid-auto-rows: 71px;
        grid-gap:  20px;
        border: 1px solid yellow;
      }
      .son {
        width: 100%;
        height: 71px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
  </body>
</html>

&-container {
    display: grid;
    gap: 16px;
    text-align: center;
    width: 100%;
    height: 360px;
    padding: 0 24px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      'main main main main  card-2 card-2  card-2 card-3 card-3  card-3'
      'main main main main  card-4 card-4  card-4 card-5 card-5  card-5';

    .card-item-main {
      grid-area: main;
      background-color: pink;
    }

    .card-item-2 {
      grid-area: card-2;
      background-color: gray;
    }
    .card-item-3 {
      grid-area: card-3;
      background-color: yellow;
    }
    .card-item-4 {
      grid-area: card-4;
      background-color: purple;
    }
    .card-item-5 {
      grid-area: card-5;
      background-color: brown;
    }
  }

 .choose-card-list {
    padding-top: 32px;
    min-height: 50px;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, 226px);
    grid-template-rows: 172px;
    justify-content: space-between;
    grid-auto-columns: 226px;
    grid-auto-rows: 172px;
    grid-gap: 16px;
  }
  .choose-card-item {
    height: 100%;
    width: 100%;
    background-color: #666;
  }