210329 CSS 媒体查询 grid布局 - HTML CSS

Home > List of blog posts > 210329 CSS 媒体查询 grid布局

Blogger Information

Blog 18

fans 0

comment 0

visits 11038

Special Recommendation

More>

Related recommendations

1. 媒体查询原理

设置最小临界宽度以及不同的样式以实现页面样式根据宽度变化

CSS

    <style>
        body {
            background-color: burlywood;
        }
        @media screen and (min-width: 400px) {
            body {
                background-color: cadetblue;
                font-size: 20px;
            }
        }
        @media screen and (min-width: 600px) {
            body {
                background-color: darkblue;
                font-size: 30px;
            }
        }
    </style>

宽度 <400px时,

400px< 宽度 <600px时，

宽度 >600px时，

2. grid布局

网格容器：网格布局的容器
网格项目：容器的子元素
网格单元（grid cell）：单个网格
网格区域（grid area）：多个网格组成的区域
网格轨道（grid tracks）：行轨道，列轨道
轨道间隙（gutters）：行的间隙，列的间隙

设置容器 display: grid
会把项目转为块元素（flex是转为行内）

       /* 1. grid 容器 */
        .container {
            /* 转为网格容器 */
            display: grid;
            grid-template-columns: auto auto auto;
            border: 1px solid #000;
            padding: 0.5rem;
        }
        .container>.item {
            border: 1px solid;
            background-color: lightsteelblue;
            padding: 0.5rem;
        }

默认

设置为grid布局，3列，宽度自适应

设置行数，行高

        /* 1. grid 容器 */
        .container {
            /* 转为网格容器 */
            display: grid;
            /* 3 columns */
            grid-template-columns: auto auto auto;
            /* 2 rows */
            grid-template-rows: 5em 5em;
            border: 1px solid #000;
            padding: 0.5rem;
        }

设置网格间隙

        .container {
            border: 1px solid #000;
            padding: 0.5rem;
            /* 转为网格容器 */
            display: grid;
            /* 轨道列宽 3 columns */
            grid-template-columns: auto auto auto;
            /* 轨道行高 2 rows */
            grid-template-rows: 5em 5em;
            /* 轨道间隙 水平 垂直*/
            gap: 0.5em;
        }

2.1 grid布局单位：fr

（可与其他单位共同使用，总-固定值）

      .container {
            border: 1px solid #000;
            padding: 0.5rem;
            /* 转为网格容器 */
            display: grid;
            /* 轨道列宽 3 columns */
            /* grid-template-columns: auto auto auto; */
            grid-template-columns: 1fr 2fr 1fr;
            /* 轨道行高 2 rows */
            grid-template-rows: 5em 5em;
            /* 轨道间隙 水平 垂直*/
            gap: 0.5em;
        }

2.2 grid常用函数

注：repeat与()间不能有空格

1. repeat()

repeat(列数，宽度)
repeat(3, 10em)
repeat(3, 10em 2em)

    /* grid-template-columns: 10em 10em 10em; */
     grid-template-columns: repeat(3, 10em);

grid-template-columns: repeat(3, 10em 2em);

2. minmax()

minmax(最小宽度，最大宽度)

设置前minmax前

grid-template-columns: 1fr 2fr 1fr;

设置minmax(30em, 2fr)后

grid-template-columns: 1fr minmax(30em, 2fr) 1fr;

2.3 grid 隐式轨道

项目数量 > 行*列

属性

grid-auto-flow: row;(默认)
默认行优先，即项目先水平排列，空间不够再换行
grid-auto-flow: column
列优先，即项目先垂直排列

例：
容器有9个item

 <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>

设置grid 布局

      .container {
            display: grid;
            border: 1px solid;
            padding: 0.5em;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 5em 5em;
        }
        .container>.item {
            background-color: lightsteelblue;
            border: 1px solid;
            padding: 0.5em;
        }

效果（item7,8,9在隐式轨道上）

设置grid-auto-flow: column;

属性

grid-auto-rows
设置隐式轨道行的高度

设置grid-auto-rows：5em 后，高度与前面的item相同

        .container {
            display: grid;
            border: 1px solid;
            padding: 0.5em;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 5em 5em;
            /* grid-auto-flow: column; */
            grid-auto-rows: 5em;
        }

grid-auto-columns
设置隐式轨道列的宽度

设置grid-auto-columns：1fr 后，宽度与前面的item相同

        .container {
            display: grid;
            border: 1px solid;
            padding: 0.5em;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 5em 5em;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
        }

2.4 grid area 控制项目位置

grid-area: 行起始编号/列起始编号/行结束编号/列结束编号

将下图中item5变色并放到item9的位置

      .container>.item:nth-of-type(5) {
            background-color: yellow;
            grid-area: 2/2/3/3;
            grid-area: 3/3/4/4;
        }

当只操作一个单元格时，可以写作以下方式，效果相同

      .container>.item:nth-of-type(5) {
            background-color: yellow;
            /* grid-area: 2/2/3/3; */
            grid-area: 2/2;
            /* grid-area: 3/3/4/4; */
            grid-area: 3/3;
        }

当使一个单元格跨越占据多个单元格时，不能省略起始行和列

        .container>.item:nth-of-type(5) {
            background-color: yellow;
            /* grid-area: 2/2/3/3; */
            grid-area: 2/2;
            /* grid-area: 3/3/4/4; */
            grid-area: 3/3;
            grid-area: 2/2/4/4;
        }

也可用:
span 跨越行数
（span 1 可用auto代替）

        .container>.item:nth-of-type(5) {
            background-color: yellow;
            /* grid-area: 2/2/3/3; */
            grid-area: 2/2;
            /* grid-area: 3/3/4/4; */
            grid-area: 3/3;
            /* grid-area: 2/2/4/4; */
            grid-area: 2/2/span 2/span 2;
            /* 简写： */
            /* grid-area: span 2/span 2; */
        }

2.5 grid项目对齐方式

前提：设置了宽高，每个项目在其单元格中有剩余空间

设置所有项目在单元格中的对齐

place-items: 垂直对齐方式水平对齐方式；
(默认值place-items:stretch; 不设置宽高有效)

      .container {
            /* place-items: 垂直对齐方式 水平对齐方式； */
            place-items: start center;
        }

设置某一个项目在单元格中对齐

place-self: 垂直对齐方式水平对齐方式；

       .container>.item:nth-of-type(6) {
            place-self: end center;
        }

设置所有项目作为整体在容器中对齐
（容器有剩余空间）

place-content: 垂直对齐方式水平对齐方式；

       .container {
            display: grid;
            background-color: lightyellow;
            height: 25em;
            border: 1px solid;
            padding: 0.5em;
            grid-template-columns: repeat(3, 10em);
            grid-template-rows: 5em 5em;
            gap: 0.5em;
            grid-auto-rows: 5em;
            /* grid-auto-flow: column; */
            /* grid-auto-columns: 1fr; */
            place-content: end center;
        }

place-content: space-between space-between

      .container {
            place-content: space-between space-between;
        }

2.6 命名式网格布局

在容器中写出命名的布局：

      body {
            height: 20em;
            display: grid;
            /* grid-template-rows: 15em 1fr 15em; */
            grid-template-rows: 15em minmax(50vw, auto) 15em;
            grid-template-columns: 3em minmax(50vh, auto) 3em;
            gap: 0.5em;
            grid-template-areas:
                "h h h"
                "l m r"
                "f f f";
        }
        header {
            grid-area: h;
        }
        footer {
            grid-area: f;
        }
        main {
            grid-area: m;
        }
        aside.left {
            grid-area: l;
        }
        aside.right {
            grid-area: r;
        }

2.7 bootstrap/layui栅格布局原理

以一行为起点，将其平分为12份，控制每个项目所占的列数（份）实现

例：

HTML

<body>
    <div class="container">
        <!-- 先定义行 -->
        <!-- 1 -->
        <div class="row">
            <span class="item col-12">col12</span>
        </div>
        <!-- 2 -->
        <div class="row">
            <span class="item col-6">col6</span>
            <span class="item col-6">col6</span>
        </div>
        <!-- 3 -->
        <div class="row">
            <span class="item col-4">col6</span>
            <span class="item col-4">col6</span>
            <span class="item col-4">col6</span>
        </div>
        <!-- 2:10 -->
        <div class="row">
            <span class="item col-2">col6</span>
            <span class="item col-10">col6</span>
        </div>
    </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
}
.container {
  min-width: 80vw;
  display: grid;
  gap: 0.5em;
}
.container > .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: 3em;
  gap: 0.5em;
}
.container > .row > .item {
  padding: 1em;
  border: 1px solid;
}
.col-12 {
  grid-area: auto / span 12;
}
.col-11 {
  grid-area: auto / span 11;
}
.col-10 {
  grid-area: auto / span 10;
}
.col-9 {
  grid-area: auto / span 9;
}
.col-8 {
  grid-area: auto / span 8;
}
.col-7 {
  grid-area: auto / span 7;
}
.col-6 {
  grid-area: auto / span 6;
}
.col-5 {
  grid-area: auto / span 5;
}
.col-4 {
  grid-area: auto / span 4;
}
.col-3 {
  grid-area: auto / span 3;
}
.col-2 {
  grid-area: auto / span 2;
}
.col-1 {
  grid-area: auto / span 1;
}

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

210407 JavaScript事件表单事件登录留言板字符串常用函数数组常用函数

2021-07-10 15:49:04