zoukankan      html  css  js  c++  java
  • grid 布局 属性示例

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>grid 布局 属性示例</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .container {
                    display: grid;
                    /*列布局*/
                    grid-template-columns: 1fr 2fr;
                    /*行布局*/
                    grid-template-rows: 100% 100%;
                    /*列间距*/
                    grid-column-gap: 15px;
                    /*行间距*/
                    grid-row-gap: 15px;
                    /*行轴对齐方式*/
                    justify-items: stretch;
                    /*列轴对齐方式*/
                    align-items: stretch;
                    
                    /*网格总大小小于网格容器大小时,网格容器内的网格行轴对齐方式*/
                    justify-content:center;
                    /*网格总大小小于网格容器大小时,网格容器内的网格列轴对齐方式*/
                    align-content:center;
                }
                .item{
                    text-align: center;
                    /*沿着行轴对齐grid item 里的内容*/
                    justify-self:stretch;
                    /*沿着列轴对齐grid item 里的内容*/
                    align-self: center;
                }
                
                .item-1 {
                    background: #008000;
                }
                
                .item-2 {
                    background: #808080;
                }
                
                .item-3 {
                    background: gold;
                }
                
                .item-4 {
                    background: pink;
                }
                
                .item-5 {
                    background: yellow;
                }
                
                .item-6 {
                    background: #FFD700;
                }
            </style>
        </head>
    
        <body>
            <div class="container">
                <div class="item item-1">1</div>
                <div class="item item-2">2</div>
                <div class="item item-3">3</div>
                <div class="item item-4">4</div>
                <div class="item item-5">5</div>
                <div class="item item-6">6</div>
            </div>
        </body>
    
    </html>
  • 相关阅读:
    HYSBZ 3813 奇数国
    HYSBZ 4419 发微博
    HYSBZ 1079 着色方案
    HYSBZ 3506 排序机械臂
    HYSBZ 3224 Tyvj 1728 普通平衡树
    Unity 3D,地形属性
    nginx 的naginx 种包含include关键字
    Redis 出现NOAUTH Authentication required解决方案
    mysql 8.0出现 Public Key Retrieval is not allowed
    修改jar包里的源码时候需要注意的问题
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9243606.html
Copyright © 2011-2022 走看看