html css简单实现九宫格布局，自适应屏幕

本文介绍: html css 实现九宫格布局，自适应屏幕，子元素之间、子元素与父元素之间的上下左右间距。

html css实现九宫格布局，自适应屏幕，子元素之间、子元素与父元素之间的上下左右间距

&lt;!doctype html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
    <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–column s 属性设置列宽

grid–template–row s 属性设置行高
gr id–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;}