grid-row-end属性(CSS设置)
CSS中的grid-row-end特点用于通过指定网格区域的内联边来界说网格行内的网格项目完毕位置。
用法:
grid-row-end:value;
特点值：
auto:网格项跨过为默认值的一行。
spanint:它指定项目将跨过的行数。
integer:它指定项目完毕的行。
initial:它将grid-row-end特点设置为其默认值。
inherit:grid-roe-end特点是从其父级继承的。
留意：不要清晰初始化容器项目的高度和宽度。假如初始化，则无法观察到跨度作用。
范例1：本示例描绘了没有grid-row-end特点的容器项目。
DOCTYPEhtml>
<html>
<head>
<title>
CSSgridcontainerPropertytitle>
<style>
.main{
display:grid;
grid-template-columns:autoautoauto;
grid-gap:20px;
padding:30px;
background-color:green;
}
.GFG{
text-align:center;
font-size:35px;
background-color:white;
padding:20px0;
}
style>
head>
<body>
<divclass="main">
<divclass="GFG">1div>
<divclass="GFG">2div>
<divclass="GFG">3div>
<divclass="GFG">4div>
<divclass="GFG">5div>
div>
body>
html>
输出：
范例2：本示例描绘具有grid-row-end：spann特点的容器项目。
DOCTYPEhtml>
<html>
<head>
<title>
CSSgridcontainerPropertytitle>
<style>
.main{
display:grid;
grid-template-columns:autoautoauto;
grid-gap:20px;
padding:30px;
background-color:green;
}
.GFG{
text-align:center;
font-size:35px;
background-color:white;
padding:20px0;
}
.Geeks1{
grid-row-end:span2;
}
style>
head>
<body>
<divclass="main">
<divclass="Geeks1GFG">1div>
<divclass="Geeks2GFG">2div>
<divclass="Geeks3GFG">3div>
<divclass="Geeks4GFG">4div>
<divclass="Geeks5GFG">5div>
div>
body>
html>
输出：
支持的浏览器：下面列出了grid-row-end特点支持的浏览器：
谷歌浏览器57.0
InternetExplorer16.0
Firefox52.0
Safari10.0
Opera44.0
作品标签： CSS
优秀作品：
评论列表（共116人参与）参与讨论或分享设计作品获得视觉癖积分奖励
任许多零根注册会员
2021-09-11 0:39:18
2、Illustrator： Illustrator（译为：插画师）是美国Adobe公司出的一款矢量处理软件，和Ph45140.jpg" /> 你会发现学完素描，插画也不好画。我有一
回复
我做菜的注册会员
2021-09-11 14:25:53
[?va??游客
2021-09-11 8:44:9
游客40510：grid-row-end属性r;"> 在这个比如中，萨凡纳uo;平面规划在概念领域上的区别与统一，并不存在着对立与对立。 视觉传达规划是为现代商业服务的艺术，首要包含标志
回复
