当前位置：网站首页>grid布局

grid布局

2022-07-24 05:17:00 【ps笔记】

grid布局概括：

flex布局是一堆布局，grid是二维布局

flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列

设置grid容器：

.container{

Display:grid;

Grid-template-columns:100px 100px 100px;

Grid-template-rows:100px 100px 100px }

.container{

Display:grid;

Grid-template-columns:100px 1fr 2fr;

Grid-template-rows:100px 100px 100px }

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:100px 100px 100px;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</body>
</html>

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        /* grid-template-columns:100px 100px 100px; */
        /* grid-template-rows:100px 100px 100px; */
        grid-template-columns:100px 1fr 2fr;
        grid-template-rows:100px 100px 100px;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</body>
</html>

grid-auto-flow:column;元素纵向排列

.container{

display:grid;

grid-auto-flow:column；

grid-template-columns:100px 100px 100px;

grid-template-rows:100px 100px 100px }

容器属性：

gird项目在单元格中的对齐方式：

justify-items 属性水平方向对齐方式

align-items 属性垂直方式对齐方式

单元格在整个gird容器中的对其方式

justify-content 属性

align-content 属性

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-template-columns:100px 100px 100px;
        justify-content: center;
        align-content: center;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        
</body>
</html>

grid-auto-columns 属性将溢出行的尺寸设置

grid-auto-rows 属性将溢出列的尺寸设置

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-auto-flow: column;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:100px 100px 100px;
        /* 溢出行的尺寸 */
        grid-auto-rows: 50px;
        /* 溢出列的尺寸 */
        grid-auto-columns: 50px;


    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">9</div>
        <div class="item">9</div>
</body>
</html>

style>
      .container{
        display:grid;
        width: 800px;
        height: 500px;
        border:1px solid blue;
        /* grid-auto-flow: column; */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .item{
         border:1px solid red ;
      }
      .first{
        /* grid-column-start: 1;
        grid-column-end: 3; */
        /* 可简写成以下 */
        grid-column: 1/3;
        grid-row: 1/3;
      }
  </style>
</head>
<body>
    <div class="container">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

    </div>
</body>
</html>

<style>
      .container{
        display:grid;
        width: 800px;
        height: 500px;
        border:1px solid blue;
        /* grid-auto-flow: column; */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .item{
         border:1px solid red ;
      }
      .first{
        /* grid-column-start: 1;
        grid-column-end: 3; */
        /* 可简写成以下 */
        grid-column: 2 / 4;
        grid-row:  2 / 4;
        justify-self: center;
        align-self: center;
      }
  </style>
</head>
<body>
    <div class="container">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

    </div>
</body>
</html>

做一个布局案例如下;

<style>
    *{
      margin: 0px;
      padding:0px;
    }
    .container {
      display: grid;
      width: 800px;
      margin: 0 auto;
      border: 1px solid blue;
      grid-template-columns: 600px 200px;
      grid-template-rows: 80px  200px 200px  200px  50px; 

    }
    .item{
      border:1px solid red;
    }
    .header{
      grid-column: 1 / 3;
    }
    .aside{
      grid-row: 2 / 5;
      grid-column: 2 / 3;
    }
    .footer{
      grid-column: 1 / 3;
    }

  </style>
</head>
<body>
    <div class="container">
      <div class="item header">header</div>
      <div class="item docs">docs</div>
      <div class="item blogs">blogs</div>
      <div class="item videos">videos</div>
      <div class="item aside">aside</div>
      <div class="item footer">footer</div>


    </div>
</body>
</html>

原网站

版权声明
本文为[ps笔记]所创，转载请带上原文链接，感谢
https://blog.csdn.net/lv_suri/article/details/125672411

当前位置：网站首页>grid布局

grid布局

边栏推荐

猜你喜欢

随机推荐