【CSS】Grid布局

Grid布局

定义

将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。

基本概念

容器和项目

• 容器：

  采用网格布局的区域。

• 项目：

  容器内部采用网格定位的子元素。

    <div class="grid-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 class="item item-7">7</div