2021-07-08

最新推荐文章于 2021-11-10 17:26:45 发布

可乐与远方

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量66

点赞数

分类专栏： grid布局文章标签： css

本文链接：https://blog.csdn.net/kelezx/article/details/118573168

版权

grid布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 500px;
        display: grid;
        height: 400px;
        background-color: cadetblue;
        opacity: 0.5;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        /* 当单元格多出来了大小 */
        grid-auto-columns: 100px;
        grid-auto-rows: 100px;
        /* 间距的混合写法 */
        gap: 10px 10px;
        /* 单元格的混合写法 */
        place-items: center center;
        /* grid布局的显示位置混合写法 */
        place-content: center center;
        /* gap: 20px 20px; */
        /* grid-template-areas:
          "a . "
          "d e ";
        grid-auto-flow: column; */
        /* 剩余空间排列 */
        grid-auto-flow: row dense;
      }
      .item {
        /* width: 200px;
        height: 200px; */
        width: 50px;
        height: 50px;
        background-color: brown;
        /*项目属性 place-self代表当个项目的排列位置和place-content一样用法 */
      }
      /* .item1 {
        width: 100%;
       项目属性混合写法的列的开始位置和结束位置也可以用线的名称来表示
        grid-cloumn:1/ 3,
        grid-row:1/3,
        //指定放在那个区域位置
        grid-area:e,
      }
      .item2 {
        width: 100%;
        grid-column-start: 1;
        grid-column-end: 3;
      } */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">4</div>
      <!-- <div class="item">1</div>
      <div class="item">2</div> -->
    </div>
    <script></script>
  </body>
</html>```

//display:grid，的容器属性和项目属性的用法 有行和列还有线和区域，边距。以及区域的排列方式和容器的排列和盒子的排列方式以及超出部分项目的大小

可乐与远方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-08

<!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" /> <titl
复制链接

扫一扫

专栏目录