html九宫格布局原理,CSS九宫格布局

Flex实现

原理： 使用flex弹性布局和flex-wrap来设置

//html代码

• 九宫格1
• 九宫格2
• 九宫格3
• 九宫格4
• 九宫格5
• 九宫格6
• 九宫格7
• 九宫格8
• 九宫格9

// css代码

.box {

position: relative;

width: 100%;

height: 600px;

}

.box-inner {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

flex-wrap: wrap;

}

.box-inner > li {

overflow: hidden;

flex-grow: 1;

background-color: darkorange;

text-align: center;

color: #ffffff;

width: 33%;

height: 200px;

line-height: 200px;

margin: 1px;

text-align: center;

}

复制代码

效果图

Grid实现

原理：使用grid创建网格布局，划分为3x3的等分布局

//html代码

九宫格1

九宫格2

九宫格3

九宫格4

九宫格5

九宫格6

九宫格7

九宫格8

九宫格9

//css代码

.box {

display: grid;

height: 600px;

width: 100%;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

}

.box > div {

width: 98%;

margin: 1%;

background-color: deeppink;

text-align: center;

line-height: 200px;

}

.box > div:nth-child(even) {

background-color: black;

color: #fff;

}

复制代码

效果图

Float实现

原理：利用float布局和31%的百分比设置宽和高

//html代码

• 九宫格1
• 九宫格2
• 九宫格3
• 九宫格4
• 九宫格5
• 九宫格6
• 九宫格7
• 九宫格8
• 九宫格9

//css代码

.box {

position: relative;

width: 100%;

height: 600px;

}

.box-inner {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.box-inner > li {

position: relative;

float: left;

width: 31%;

height: 31%;

margin: 1%;

list-style-type: none;

background-color: springgreen;

text-align: center;

line-height: 200px;

}

.box-inner > li:nth-child(odd) {

background-color: silver;

}

复制代码

效果图

Table实现

原理1：使用原生table表格实现九宫格

缺点：单元之间的间隔使用border-spacing实现，不支持百分比，设置后为添加单元四周的间隔

//html代码

九宫格1	九宫格2	九宫格3
九宫格4	九宫格5	九宫格6
九宫格7	九宫格8	九宫格9

//css代码

.box {

position: relative;

width: 100%;

height: 600px;

}

.box-inner {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

margin: 10px;

border-spacing: 0.57em;

font-size: 20px;

empty-cells: hide;

table-layout: fixed;

}

.box-inner > tbody > tr > td {

text-align: center;

background-color: burlywood;

overflow: hidden;

}

复制代码

效果图

原理2：模仿table表格，模拟tr+td的方式实现,减少重置table某些样式

缺点：对margin值无反应，响应padding属性，内容溢出时会自动撑开父元素

包含三个li,li包含三个div

ul使用display:table,模拟

li使用display: table-row, 模拟

li包含的三个div使用display: table-cell,模拟

和

//html代码

• 九宫格1
  九宫格2
  九宫格3
• 九宫格4
  九宫格5
  九宫格6
• 九宫格7
  九宫格8
  九宫格9

//csss代码

.box {

position: relative;

width: 100%;

height: 600px;

}

.box-inner {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: table;

margin: 10px;

}

.box-inner li {

display: table-row;

}

.box-inner li div {

display: table-cell;

width: 30%;

background-color: crimson;

border: 1px solid black;

line-height: 200px;

text-align: center;

font-size: 20px;

}

.box-inner li div:nth-child(even) {

background-color: seashell;

}

复制代码

效果图