首页 前端知识 html css简单实现九宫格布局,自适应屏幕

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

2024-03-27 10:03:11 前端知识 前端哥 245 841 我要收藏

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

如图:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4224.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!