如何用CSS做自适应九宫格效果有多少办法

发布时间：2023-09-07 12:40:04 所属栏目：语言来源：

导读：今天小编跟大家讲解下有关“如何用CSS做自适应九宫格效果，有多少方法”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。本文用示例介绍CSS进行九宫格

今天小编跟大家讲解下有关“如何用CSS做自适应九宫格效果，有多少方法”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

本文用示例介绍CSS进行九宫格布局的方法。朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。本文只展示自适应布局的方案。不展示手动指定宽度的那种方案。

方案1：grid

grid是专门用来处理二维的，最适合用来二维布局。

代码

<!doctype html>

<head>

<title>This is title</title>

<style>

.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 100px 100px 100px;

grid-gap: 10px;

padding: 10px;

}

.item {

border: 1px solid black;

</style>

</head>

<body>

</div>

</body>

</html>

方案2：flex+calc()

因为flex是面向一维的，所以我们需要加上calc这个函数控制其垂直方向。

代码

<!doctype html>

<head>

<title>This is title</title>

<style>

.container {

width: 100%;

display: flex;

/*换行*/

flex-wrap: wrap;

}

.item {

width: calc(calc(100% / 3) - 10px);

height: 100px;

margin: 5px;

box-sizing: border-box;

border: 1px solid black;

</style>

</head>

<body>

</div>

</body>

</html>

方案3：absolute

代码

<!doctype html>

<head>

<title>This is title</title>

<style>

html,body{

height:100%;

margin:0;

}

.container{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

.item{

float:left;

height:100px;

width: calc(calc(100% / 3) - 10px);

position:relative;

border: 1px solid black;

.item:before{

content:'';

left:10px;

right:10px;

top:10px;

bottom:10px;

border-radius:10px;

.item:after{

content:attr(data-index);

height:30px;

margin:auto;

text-align:center;

</style>

</head>

<body>

</div>

</div>

</body>

</html>

到此，关于“如何用CSS做自适应九宫格效果，有多少方法”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

如何用CSS做自适应九宫格效果 有多少办法

如何用CSS做自适应九宫格效果有多少办法