前端学完flex布局，再学grid布局
摘要：前端安卓 开发环境搭建 前端开发如何转行 用u3d能做安卓前端开发么 纸上得来终觉浅，绝知此事要躬行。 2行2列的网格 html 代码 <section> <div>1</div> <div>2</div> ……
前端安卓 开发环境搭建 前端开发如何转行 用u3d能做安卓前端开发么
纸上得来终觉浅，绝知此事要躬行。
2行2列的网格
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: purple;
}
div:nth-child(4) {
background: blue;
}
</style>
带间距的网格
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: purple;
}
div:nth-child(4) {
background: blue;
}
</style>
比例设置
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<style>
section {
display: grid;
width: 400px;
height: 400px;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 1fr;
grid-row-gap: 10%;
grid-column-gap: 20px;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: purple;
}
div:nth-child(4) {
background: blue;
}
</style>
逆序显示
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
}
div:nth-child(1) {
background: red;
grid-row: 2;
grid-column: 2;
}
div:nth-child(2) {
background: green;
grid-row: 2;
grid-column: 1;
}
div:nth-child(3) {
background: purple;
grid-row: 1;
grid-column: 2;
}
div:nth-child(4) {
background: blue;
grid-row: 1;
grid-column: 1;
}
</style>
画个图形
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
div:nth-child(1) {
background: red;
grid-row: 1;
grid-column: 1/3;
}
div:nth-child(2) {
background: pink;
grid-row: 1/3;
grid-column: 3;
}
div:nth-child(3) {
background: yellow;
grid-row: 3;
grid-column: 2/4;
}
div:nth-child(4) {
background: green;
grid-row: 2/4;
grid-column: 1;
}
div:nth-child(5) {
background: blue;
grid-row: 2;
grid-column: 2;
}
</style>
换种方式实现
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px 20px;
}
div:nth-child(1) {
background: red;
grid-area: 1/1/2/3
}
div:nth-child(2) {
background: pink;
grid-area: 1/3/3/4
}
div:nth-child(3) {
background: yellow;
grid-area: 3/2/4/4;
}
div:nth-child(4) {
background: green;
grid-area: 2/1/4/2;
}
div:nth-child(5) {
background: blue;
grid-area: 2/2/3/3;
}
</style>
再换种方式实现
html 代码
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<style>
section {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-template-areas: “a a b”
“d e b”
“d c c”;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
div:nth-child(1) {
background: red;
grid-area: a;
}
div:nth-child(2) {
background: pink;
grid-area: b;
}
div:nth-child(3) {
background: yellow;
grid-area: c;
}
div:nth-child(4) {
background: green;
grid-area: d;
}
div:nth-child(5) {
background: blue;
grid-area: e;
}
</style>
justify-items属性demo
html 代码
<select id=”select”>
<option>stretch</option>
<option>start</option>
<option>center</option>
<option>end</option>
</select>
<section id=”grid”>
<div>1st</div>
<div>2nd</div>
<div>3rd</div>
<div>4th</div>
</section>
<style>
section {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 20px 20px;
background: gray;
}
div {
background: green;
}
select {
width: 200px;
height: 30px;
background: #f90;
color: white;
}
</style>
<script>
select.onchange = function () {
grid.style.justifyItems = this.value;
};
</script>
align-items属性测试demo
html 代码
<select id=”select”>
<option>stretch</option>
<option>start</option>
<option>center</option>
<option>end</option>
</select>
<section id=”grid”>
<div>1st</div>
<div>2nd</div>
<div>3rd</div>
<div>4th</div>
</section>
<style>
section {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 20px 20px;
background: gray;
}
div {
background: green;
}
select {
width: 200px;
height: 30px;
background: #f90;
color: white;
}
</style>
<script>
select.onchange = function () {
grid.style.alignItems = this.value;
};
</script>
justify-content属性测试demo
html 代码
<select id=”select”>
<option>start</option>
<option>end</option>
<option>center</option>
<option>stretch</option>
<option>space-around</option>
<option>space-between</option>
<option>space-evenly</option>
</select>
<section id=”grid”>
<div>1st</div>
<div>2nd</div>
<div>3rd</div>
<div>4th</div>
</section>
<style>
section {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 20px 20px;
background: gray;
}
div {
background: green;
}
select {
width: 200px;
height: 30px;
background: #f90;
color: white;
}
</style>
<script>
select.onchange = function () {
grid.style.justifyContent = this.value;
};
</script>
align-content属性测试demo
html 代码
<select id=”select”>
<option>start</option>
<option>end</option>
<option>center</option>
<option>stretch</option>
<option>space-around</option>
<option>space-between</option>
<option>space-evenly</option>
</select>
<section id=”grid”>
<div>1st</div>
<div>2nd</div>
<div>3rd</div>
<div>4th</div>
</section>
<style>
section {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 20px 20px;
background: gray;
height: 400px;
}
div {
background: green;
}
select {
width: 200px;
height: 30px;
background: #f90;
color: white;
}
</style>
<script>
select.onchange = function () {
grid.style.alignContent = this.value;
};
</script>
待续～～
推荐grid布局文章：《Grid布局指南》
前端开发如何优化 前端和安卓开发 前端开发如何规范css
» 本文来自：前端开发者 » 《前端学完flex布局，再学grid布局》
» 本文链接地址：https://www.rokub.com/5704.html
» 您也可以订阅本站：https://www.rokub.com
近期评论