当前位置:首页 > 编程笔记 > 正文
已解决

grid布局中grid-row和grid-column

来自网友在路上 139839提问 提问时间:2023-11-02 11:50:21阅读次数: 39

最佳答案 问答题库398位专家为你答疑解惑


目录

一、grid-row

二、grid-column

三、实例


一、grid-row

grid-row属性定义了网格元素行的开始和结束位置。结合了grid-row-start和grid-row-end

 grid-row: 1 / 3;//表示行线从第一行线到第三行线为止

二、grid-column

grid-column属性定义了网格元素列的开始和结束位置。结合了grid-column-start和grid-column-end

 grid-column: 1 / 3;//表示列线从第一列线到第三列线为止

三、实例

.content {display: grid;grid-template-columns: 1fr 3fr;grid-template-rows: 1fr 1fr 1fr;width: 100%;height: 100%;gap: 20px;.item {min-width: 100%;min-height: 100%;border: 1px solid #cc7373;}.item_last {grid-row: 1 / 3;grid-column: 2 / 3;}
}
 <div class="view"><div class="content"><div class="item"></div><div class="item"></div><div class="item item_last"></div><div class="item"></div><div class="item"></div></div></div>

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"grid布局中grid-row和grid-column":http://eshow365.cn/6-30140-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!