CSS: display: grid布局
CSS 布局 Grid display
2023-09-11 14:16:16 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .grid { display: grid; /* grid-template-columns: 100px 100px 100px; */ grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 10px; } .grid>div { background-color: palegreen; } </style> </head> <body> <div class="grid"> <div class="column1">column1</div> <div class="column2">column2</div> <div class="column3">column3</div> <div class="column4">column4</div> <div class="column5">column5</div> <div class="column6">column6</div> </div> </body> </html>
相关文章
- CSS移动端布局和文字溢出显示省略号(1+X Web前端开发初级 例题)
- CSS - PC / 移动端左右满屏高度布局(100% 高度 + 溢出滚动条)
- CSS - 后台管理系统布局示例(上左中)
- ASP.NET给前端动态添加修改CSS样式JS 标题 关键字
- css多种方式实现等宽布局
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.8 作业
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.7 语义化验证
- 2014第16周三CSS布局再学习摘录
- CSS之可收缩的底部边框
- makingcss 一个提高CSS编写效率的网站
- css Table布局:基于display:table的CSS布局
- CSS魔法堂:Transition就这么好玩
- CSS学习知识整理(一)Css 布局
- CSS 加粗(css font-weight)
- flex应用:使用flex布局实现纯CSS树状图表