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

Fan.loong

已于 2023-04-02 22:33:01 修改

阅读量1.7k

点赞数

于 2023-04-02 21:20:34 首次发布

本文链接：https://blog.csdn.net/qq_35404844/article/details/129917203

版权

html 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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;}

如图：