CSS 布局之 —— Grid 布局速览

1. 定义网格

  任何一个容器都可以指定为 Gird 布局,行内元素也可以使用 Gird 布局。

    (1)通过 display 属性设置为 grid一个元素变成一个 grid 布局 

    CSS 布局之 —— Grid 布局速览

  (2)通过 grid-template-columns / grid-template-rows 属性,定义网格的行 / 列。

    CSS 布局之 —— Grid 布局速览

 

2. 使用网格

  Grid(网格)元素的直接子元素,称为 Grid Items( 网格项)

  (1)通过 grid-column / grid-row 属性指定 Grid Items 在网格中所占的区域

    CSS 布局之 —— Grid 布局速览

3. 布局示例

  • css 代码如下:

    CSS 布局之 —— Grid 布局速览
    <!DOCTYPE html>
    <html>
        <div class="grid-container" style="grid-template-rows: 42px 2px 756px;">
          <div id="title-grid" class="grid-container title" style="grid-row: 1 / span 1;">Title</div>
          <div id="client-grid" class="grid-container" style="grid-row: 3 / span 2; grid-template-columns: 297px 3px 900px;">
              <div class="menu" style="grid-column: 1 / span 1;">Menu</div>
              <div class="content" style="grid-column: 3 / span 1;">Content-Page</div>
          </div>
        </div>
    </html>
    
    <style type="text/css">
        .grid-container {
            display: grid;
        }
        
        .title {
            background:green;
        }
        .menu {
            background:yellow;
        }
        .content {
            background:blue;
        }
    </style>
    View Code

     

  • 浏览器运行效果图:

    CSS 布局之 —— Grid 布局速览

     

     

 

 

    

 

CSS 布局之 —— Grid 布局速览

上一篇:上传大型视频文件到服务器的实例


下一篇:Angular框架下从后端获取的HTML片段无法应用本地样式