html css实现九宫格布局，自适应屏幕，子元素之间、子元素与父元素之间的上下左右间距
html：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html,body,ui,li{ padding: 0; margin: 0; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
方法一：grid布局
通过 display: grid;然后结合
grid-template-columns 属性设置列宽
grid-template-rows 属性设置行高
grid-gap行与列之间的间隙
实现
ul { overflow: hidden; background: none; padding: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 10px; } li{ border: 1px solid red; list-style: none; }
如图：
方法二：flex布局
通过 flex-wrap: wrap;然后子元素计算宽度并换行实现。
ul { display: flex; padding: 100px; /*换行*/ flex-wrap: wrap; } li { width: calc(calc(100% / 3) - 10px); height: 100px; margin: 5px; list-style: none; box-sizing: border-box; border: 1px solid black;}
如图：
