找回密码
当前位置：前端开发者 > CSS > 正文

前端学完flex布局，再学grid布局

2018-09-14 22:06:35 分类：CSS 阅读(526) 评论(0)

前端安卓 开发环境搭建 前端开发如何转行 用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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论