• 网格(grid)布局

    目录

    概述

    使用网格布局水平垂直居中盒子

    基本使用

    1. 定义一个网格

     2. 操控列

     3. 操控行

    4. 网格间隙

     5. 基于线号放置元素

     6. 使用 grid-template-areas 属性放置元素

     7. 控制元素如何排列

    总结

    概述

    网格是由一系列水平（row 行）及垂直的线构（column 列）成的一种布局模式,  也就是说网格布局主要是操控行和列，面试呢常常会问到如何使一个盒子水平垂直居中是css中的一种布局方式，网格布局就是答案之一。

    使用网格布局水平垂直居中盒子

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .box {
    11.       width: 100px;
    12.       height: 100px;
    13.       background: skyblue;
    14.     }
    15.  
    16.     body {
    17.       display: grid;
    18.       justify-content: center;
    19.       align-items: center;
    20.       height: 100vh;
    21.       margin: 0;
    22.     }
    23.  
    24.     .box {
    25.       grid-area: box;
    26.     }
    27.   style>
    28. head>
    29.  
    30. <body>
    31.   <div class="box">div>
    32. body>
    33.  
    34. html>

    基本使用

    1. 定义一个网格

    设置元素的 display 值为 grid 或者 inline-grid，仅设置display为grid，而不控制行和列是没有任何效果的。其子元素依旧按照从上至下的默认布局进行排列。

    1. ............
    2. <head>
    3.   .............
    4.   <style>
    5.     .container {
    6.       display: grid;
    7.     }
    8.     .item {
    9.       background-color: orange;
    10.       word-break: break-all;
    11.     }
    12.   style>
    13. head>
    14. <body>
    15.   <div class="container">
    16.     <div class="item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadiv>
    17.     <div class="item">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdiv>
    18.     <div class="item">cccccccccccccccccccccccccccccccccccccccccccccccdiv>
    19.     <div class="item">dddddddddddddddddddddddddddddddddddddddddddiv>
    20.     <div class="item">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeediv>
    21.     <div class="item">fffffffffffffffffffffffffffffffffffffffffdiv>
    22.     <div class="item">ggggggggggggggggggggggggggggggggggggggdiv>
    23.     <div class="item">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdiv>
    24.     <div class="item">iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiidiv>
    25. body>
    26. ..............

     2. 操控列

    通过设置 grid-template-columns，大致分为三种形式

    • 不同列宽：grid-template-columns: 100px 200px 100px;  一个一个设置每一列的宽度，几个宽度即为几列

    • 相同列宽：grid-template-columns: repeat(3, 200px); 对于列宽相等的情况可以使用repeat函数，参数6为6列，200px为列宽

    • 自适应列宽：grid-template-columns: 1fr 1fr 1fr;  将父元素的空间瓜分为3份，每个子元素占据一份

     

     

    1.     .container {
    2.       display: grid;
    3.       /* 设置网格的列宽 */
    4.       grid-template-columns: 100px 200px 100px;
    5.       grid-template-columns: repeat(3, 200px);
    6.       grid-template-columns: 1fr 1fr 1fr;
    7.     }

     3. 操控行

    通过设置 grid-template-row，基本同上

    • 不同行宽：grid-template-row: 100px 200px 100px

    • 相同行宽：grid-template-row: repeat(3, 200px)

    • 自适应列宽：grid-template-row: 1fr 1fr 1fr；由于我们没给父盒子加高度，所以父盒子的高度是由其子元素撑开的，故1fr即子元素累计高度的1/3，需要注意的是在没有设置子元素高度的时候，每个子元素的高度以最高的（内容最多的）那个子元素为准

     

     

    1.     .container {
    2.       display: grid;
    3.       grid-template-columns: 1fr 1fr 1fr;
    4.       /* 设置网格的行宽 */
    5.       grid-template-rows: 100px 200px 100px;
    6.       grid-template-rows: repeat(3, 100px);
    7.       grid-template-rows: 1fr 1fr 1fr;
    8.     }

    4. 网格间隙

    grid-gap: 20px(垂直方向) 10px(水平方向); 用于设置每个网格之间的间隙，是 grid-column-gap， grid-row-gap的简写形式

    1.     .container {
    2.       display: grid;
    3.       /* 设置网格的列宽 */
    4.       grid-template-columns: repeat(3, 150px);
    5.       grid-template-rows: 1fr 1fr 1fr;
    6.       grid-gap: 20px 10px;
    7.     }

     5. 基于线号放置元素

    单单控制行和列往往是满足不了需求的。我们可以通过线号手动设置某个子元素的位置。

    • grid-column: grid-column-start/ grid-column-end;
    • grid-row: grid-column-end/ grid-row-end; 
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .container {
    11.       display: grid;
    12.       grid-template-columns: repeat(3, 150px);
    13.       grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    14.       grid-gap: 20px 10px;
    15.     }
    16.  
    17.     .item {
    18.       background-color: orange;
    19.       word-break: break-all;
    20.     }
    21.  
    22.     .start {
    23.       grid-column: 1/4;
    24.       grid-row: 1/2;
    25.     }
    26.  
    27.     .end {
    28.       grid-column: 1/4;
    29.       grid-row: 4/5;
    30.     }
    31.   style>
    32. head>
    33.  
    34. <body>
    35.   <div class="container">
    36.     <div class="item start">我是headerdiv>
    37.     <div class="item">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdiv>
    38.     <div class="item">cccccccccccccccccccccccccccccccccccccccccccccccdiv>
    39.     <div class="item">dddddddddddddddddddddddddddddddddddddddddddiv>
    40.     <div class="item">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeediv>
    41.     <div class="item">fffffffffffffffffffffffffffffffffffffffffdiv>
    42.     <div class="item">ggggggggggggggggggggggggggggggggggggggdiv>
    43.     <div class="item end">我是footerdiv>
    44.   div>
    45.  
    46. body>
    47.  
    48. html>

     6. 使用 grid-template-areas 属性放置元素

    grid-template-areas 属性用于设置区域

    给将要放置在区域内的元素设置 grid-area: areaname

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     #page {
    11.       display: grid;
    12.       grid-template-columns: 150px 1fr; 设置网格为两列，第一列150px，第二列自适应
    13.       grid-template-rows: 100px 500px 100px; 设置网格为三行，第一行150px，第二列500px，...
    14.       grid-template-areas: "header  header" 
    15.                  // 给这三行两列设置区域，第一行第一列是header，第一行第二列是header
    16.                            "nav  main"
    17.                  //                     第二行第一列是nav，第二行第二列是main
    18.                            "footer  footer";
    19.                  //                     第三行第一列是footer，第三行第二列是footer
    20.       grid-gap: 20px 10px;
    21.     }
    22.  
    23.     #page>header {
    24.       grid-area: header;
    25.       background-color: #8ca0ff;
    26.     }
    27.  
    28.     #page>nav {
    29.       grid-area: nav;
    30.       background-color: #ffa08c;
    31.     }
    32.  
    33.     #page>main {
    34.       grid-area: main;
    35.       background-color: #ffff64;
    36.     }
    37.  
    38.     #page>footer {
    39.       grid-area: footer;
    40.       background-color: #8cffa0;
    41.     }
    42.   style>
    43. head>
    44.  
    45. <body>
    46.   <section id="page">
    47.     <header>Headerheader>
    48.     <nav>Navigationnav>
    49.     <main>Main areamain>
    50.     <footer>Footerfooter>
    51.   section>
    52.  
    53. body>
    54.  
    55. html>

     

    ​

     7. 控制元素如何排列

    grid-auto-flow属性用于控制元素如何排列

    • row 逐行填充。

    • column 逐列填充

    • dense 填充空白

     

     

     可以看到 row 是从左至右逐行排列的，如果某个网格占据空间较大，可能会流白

    column 是从上至下逐列排的

    dense 可以填充留白的空间

    总结

    display: grid / inline-grid 开启网格布局

    grid-template-column 控制列

    grid-template-row 控制行

    grid-gap 控制间隙

    grid-column 控制元素占几列

    grid-row 控制元素占几行

    grid-template-area 设置网格区域 ，grid-area 设置元素占据哪个网格区域

    grid-auto-flow 设置网格如何排列

    详细信息查阅官网 网格布局 - CSS（层叠样式表） | MDN

     

  • 相关阅读:
    python和matplotlib可视化笔记
    AlphaFold2源码解析(7)--模型之Evoformer
    浅析STL三大组件，容器 算法 迭代器。
    字节跳动五面都过了，结果被刷了，问了hr原因竟说是...
    使用curl命令传输数据
    脐带间充质干细胞
    [java入门到精通] 11 泛型,数据结构,List,Set
    Spring中Bean的实例化详细流程
    编程中的零代码和低代码解决方案对比
    并发编程之生产者消费者模型
  • 原文地址：https://blog.csdn.net/m0_58239318/article/details/127305175