代码拉取完成,页面将自动刷新
body{
display:grid;
}
body{
display:grid;
grid-template-columns:1fr 1fr 1fr;
/*
或者用repeat(3,1fr)规定有三列
*/
}
body{
display:grid;
grid-template-columns:1fr 3fr;
grid-gap:1rem;
/*
此时body下的元素的行列间距就都是1rem
*/
}
body{
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-row-gap:1rem;
/*
同理列间距
*/
}
body{
display:grid;
grid-template-columns:1fr 2fr 2fr;/* 3 列*/
grid-auto-rows:minmax(100px,auto);/*minmax()规定了最小行高是100px*/
}
body{
display:grid;
grid-template-columns:1fr 2fr 3fr;
grid-gap:1rem;
justify-items:center;
align-items:center;
}
body div{
justify-self:start;
align-self:end;
}
body{
/*假设定义了一个三列四行的布局,其中的header,main,footer都是独占一行,由于是三列结构所以他们都是在一行之中占三列*/
display:grid;
grid-template-areas:
'header header header'
'aside content content'
'main main main '
'footer footer footer';
/*这里规定网格布局的模板*/
grid-gap:1rem;
}
header{
grid-area:header;
}
aside{
gird-area:aside;
}
div.content{
grid-area:content;
}
div.main{
grid-area:main;
}
footer{
grid-area:footer;
}
/*网格布局,响应式布局更加简单*/
@media screen and (max-width:720px){
body{
/*当屏幕宽度小于720px时候变成了单列单行排列*/
grid-template-areas:
'header'
'aside'
'content'
'main'
'footer'
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。