search

博客列表 >210329 CSS 媒体查询 grid布局

210329 CSS 媒体查询 grid布局

xyphpblog
xyphpblog原创
2021年04月02日 08:57:42524浏览

1. 媒体查询原理

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

CSS

  1.     <style>
  2.         body {
  3.             background-color: burlywood;
  4.         }
  6.         @media screen and (min-width: 400px) {
  7.             body {
  8.                 background-color: cadetblue;
  9.                 font-size: 20px;
  10.             }
  11.         }
  13.         @media screen and (min-width: 600px) {
  14.             body {
  15.                 background-color: darkblue;
  16.                 font-size: 30px;
  17.             }
  18.         }
  19.     </style>

宽度 <400px时,

400px< 宽度 <600px时，

宽度 >600px时，

2. grid布局

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

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

  1.        /* 1. grid 容器 */
  2.         .container {
  3.             /* 转为网格容器 */
  4.             display: grid;
  5.             grid-template-columns: auto auto auto;
  7.             border: 1px solid #000;
  8.             padding: 0.5rem;
  9.         }
  11.         .container>.item {
  12.             border: 1px solid;
  13.             background-color: lightsteelblue;
  14.             padding: 0.5rem;
  15.         }

默认

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

设置行数，行高

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

设置网格间隙

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

2.1 grid布局单位：fr

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

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

2.2 grid常用函数

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

1. repeat()

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

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

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

2. minmax()

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

设置前minmax前

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

设置minmax(30em, 2fr)后

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

2.3 grid 隐式轨道

项目数量 > 行*列

属性

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

例：
容器有9个item

  1.  <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>

设置grid 布局

  1.       .container {
  2.             display: grid;
  4.             border: 1px solid;
  5.             padding: 0.5em;
  6.             grid-template-columns: repeat(3, 1fr);
  7.             grid-template-rows: 5em 5em;
  8.         }
  10.         .container>.item {
  11.             background-color: lightsteelblue;
  12.             border: 1px solid;
  13.             padding: 0.5em;
  14.         }

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

设置grid-auto-flow: column;

属性

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

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

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

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

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

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

2.4 grid area 控制项目位置

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

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

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

  • 当只操作一个单元格时，可以写作以下方式，效果相同
  1.       .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             /* grid-area: 2/2/3/3; */
  4.             grid-area: 2/2;
  5.             /* grid-area: 3/3/4/4; */
  6.             grid-area: 3/3;
  7.         }

  • 当使一个单元格跨越占据多个单元格时，不能省略起始行和列
  1.         .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             /* grid-area: 2/2/3/3; */
  4.             grid-area: 2/2;
  5.             /* grid-area: 3/3/4/4; */
  6.             grid-area: 3/3;
  7.             grid-area: 2/2/4/4;
  8.         }

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

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

2.5 grid项目对齐方式

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

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

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

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

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

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

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

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

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

  1.        .container {
  2.             display: grid;
  4.             background-color: lightyellow;
  5.             height: 25em;
  6.             border: 1px solid;
  7.             padding: 0.5em;
  8.             grid-template-columns: repeat(3, 10em);
  9.             grid-template-rows: 5em 5em;
  10.             gap: 0.5em;
  11.             grid-auto-rows: 5em;
  12.             /* grid-auto-flow: column; */
  13.             /* grid-auto-columns: 1fr; */
  14.             place-content: end center;
  15.         }

place-content: space-between space-between

  1.       .container {
  2.             place-content: space-between space-between;
  3.         }

2.6 命名式网格布局

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

  1.       body {
  2.             height: 20em;
  3.             display: grid;
  4.             /* grid-template-rows: 15em 1fr 15em; */
  5.             grid-template-rows: 15em minmax(50vw, auto) 15em;
  6.             grid-template-columns: 3em minmax(50vh, auto) 3em;
  7.             gap: 0.5em;
  9.             grid-template-areas:
  10.                 "h h h"
  11.                 "l m r"
  12.                 "f f f";
  13.         }
  15.         header {
  16.             grid-area: h;
  17.         }
  19.         footer {
  20.             grid-area: f;
  21.         }
  23.         main {
  24.             grid-area: m;
  25.         }
  27.         aside.left {
  28.             grid-area: l;
  29.         }
  31.         aside.right {
  32.             grid-area: r;
  33.         }

2.7 bootstrap/layui栅格布局原理

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

例：

HTML

  1. <body>
  2.     <div class="container">
  3.         <!-- 先定义行 -->
  4.         <!-- 1 -->
  5.         <div class="row">
  6.             <span class="item col-12">col12</span>
  7.         </div>
  8.         <!-- 2 -->
  9.         <div class="row">
  10.             <span class="item col-6">col6</span>
  11.             <span class="item col-6">col6</span>
  12.         </div>
  13.         <!-- 3 -->
  14.         <div class="row">
  15.             <span class="item col-4">col6</span>
  16.             <span class="item col-4">col6</span>
  17.             <span class="item col-4">col6</span>
  18.         </div>
  19.         <!-- 2:10 -->
  20.         <div class="row">
  21.             <span class="item col-2">col6</span>
  22.             <span class="item col-10">col6</span>
  23.         </div>
  24.     </div>
  25. </body>

CSS

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  14. .container {
  15.   min-width: 80vw;
  16.   display: grid;
  17.   gap: 0.5em;
  18. }
  20. .container > .row {
  21.   display: grid;
  22.   grid-template-columns: repeat(12, 1fr);
  23.   min-height: 3em;
  24.   gap: 0.5em;
  25. }
  27. .container > .row > .item {
  28.   padding: 1em;
  29.   border: 1px solid;
  30. }
  32. .col-12 {
  33.   grid-area: auto / span 12;
  34. }
  35. .col-11 {
  36.   grid-area: auto / span 11;
  37. }
  38. .col-10 {
  39.   grid-area: auto / span 10;
  40. }
  41. .col-9 {
  42.   grid-area: auto / span 9;
  43. }
  44. .col-8 {
  45.   grid-area: auto / span 8;
  46. }
  47. .col-7 {
  48.   grid-area: auto / span 7;
  49. }
  50. .col-6 {
  51.   grid-area: auto / span 6;
  52. }
  53. .col-5 {
  54.   grid-area: auto / span 5;
  55. }
  56. .col-4 {
  57.   grid-area: auto / span 4;
  58. }
  59. .col-3 {
  60.   grid-area: auto / span 3;
  61. }
  62. .col-2 {
  63.   grid-area: auto / span 2;
  64. }
  65. .col-1 {
  66.   grid-area: auto / span 1;
  67. }
上一条：js引入方式、变量与常量的声明与使用方式、函数与高阶函数，实例演示、实例演示函数的参数及归并参数、箭头函数的语法与使用场景、立即执行函数的语法与使用方式，实例演示下一条：JavaScript基础之 变量与常量的声明、函数 箭头函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多