Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid的9个常用属性
Blogger Information
Blog 16
fans 0
comment 0
visits 6127
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid的9个常用属性
glen
Original
385 people have browsed it
flex小案例，导航
  1. html部分代码：
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>felx小案例</title>
  7.     <link rel="stylesheet" href="css/header.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <nav class="menu">
  12.             <a href=""><img src="php123.png" alt=""></a>
  13.         <a href="" class="active">首页</a>
  14.         <a href="">教学视频</a>
  15.         <a href="">学习路径</a>
  16.         <a href="">社区问答</a>
  17.         <div class="login">
  18. <a href="">登录</a>
  19. <a href="">注册</a>
  20.         </div>
  21.     </nav>
  22.     </header>
  25. </body>
  26. </html>
  1. css部分代码：
  2. @import url(reset.css);
  4. body header .menu {
  6. height: 60px;
  8. background-color:#fff;
  9. box-shadow: 0px 4px 8px rgba(red, green, blue, alpha);
  11. display: flex;
  17. }
  19. header .menu > a:first-of-type{
  20.     width: 120px;
  21. }
  24. header .menu img{
  25.     width: 100%;
  26.     height: 100%;
  27. }
  29. header .menu > a:not(:first-of-type) {
  30.     padding: 20px;
  31. }
  33. header .menu > a.active,
  34. header .menu > a:hover,
  35. header .menu .login a:hover {
  36.     color: #f40b0b;
  37. }
  39. header .menu .login {
  40.     margin-left: auto;
  42.     display: flex;
  44. }
  46. header .menu .login a {
  47.     color: #afafaf;
  48.     padding: 20px;
  49. }

grid的9个布局属性：

  1. /* 第一步：
  2. 创建grid容器 */
  3.     display: grid;
  4. 先创建一个grid容器
  5.    <style>
  6. .container {
  7.     width: 30em;
  8.     height: 30em;
  9.     background-color: wheat;
  10. /* 创建grid容器 */
  11.     display: grid;
  1.  /* 第二步：
  2.     /* 画格子，划分网格单元 */
  3.     /* 三列，每列宽度10em */ 
  4.  然后划格子，划分单元网格：
  5.  grid：是grid容器，是一个网格布局属性
  6.  template：模板
  7.  columns：列，创建几列；rows：行
  8.  grid-template-columns：10em 10em 10em ：创建一个三列，每列宽高10em
  9.   grid-template-rows：10em 10em 10em ：创建一个三行，每行宽高10em
  13.    /* 简化： */
  14.     grid-template-columns: repeat(3, 10em);
  15.     grid-template-rows:repeat(3, 10em);
  1. /* 第三步：
  2. 将项目放到指定的格子中
  3. 项目是容器的：直接子元素 */
  4. .container > .item {
  5.     background-color: violet;
  6.    /*  默认将项目放到容器的左上角开始的第一个网格中
  8.     项目的位置可以自定义，可以自定义项目位置，显示在任何位置
  9.     grid-column: 列;放到第几行第几行之间
  10.     grid-row：行；放到第几行第几行之间 */
  11. grid-row: 2/3;
  12. grid-column: 2/3;

  1. ```
  2. /* 网格区域：就是由一个或者多个单元构成空间
  3. 网格单元其实就是“网格区域”的一个特例（只有一个单元格的场景下）
  5. 网格单元---->  网格区域：网格单元 PLUS++ */
  6. grid-row: 2/4;
  7. grid-column: 2/4;
  9. /* span 关键字：可以指定跨越的行\列 */
  11. /* grid-area: 直接定义网格区域;
  12. grid-area：行开始/列开始/行结束/列结束 */
  13. grid-area: 2 / 2 / span 2 / span 2;

grid-auto-column：

  1. /* 默认项目的排列是：行优先，从左往右依次排序，一行排不下就换行 */
  2. /* 自定义：竖着排 */
  3. grid-auto-flow: row;

gap:用于设置项目之间的间距

  1. /* gap: 行间距  列间距; */
  2. gap: .625rem;
  3. }

place-content :所有项目在容器的对齐方式;

  1. place-content: 垂直方向，水平方向; */  /* satrt：默认值;  end：靠右; center：居中 */
  2. place-content: start start;/*  默认值  */
  3. place-content: center end;  /* center：垂直方向居中； end：水平方向靠右 */
  4. place-content: center center;  /* center：垂直方向居中；水平方向居中 */
  5. }

  1. 所有剩余空间还可以在项目之间进行分配:
  2. between：两端对齐/around：分散对齐
  3. 注意：不要看项目里，看单元格！ */
  4. place-content: space-between  space-around;
  5.  /*space-between :垂直方向/列方向 两端对齐
  6.  space-around  :水平方向/行方向 分散对齐*/
  10. place-content:space-between;
  11. /*垂直/水平方向都居中对齐*/


place-self设置某个特定项目的对齐方式

  1. 代码演示：
  2. .container > .item:nth-of-type(5){
  3. background-color: yellow;
  4. place-self:start
  5. }

grid的9个布局属性 作用
grid 创建grid容器
grid-template-columns/rows 显示生成网格单元
grid 将项目放到指定的网格单元中
grid-auto-flow 行与列的排序规则
grid-auto-row/column 隐式网格的行/列的大小
place-content 项目在”容器”中的对齐方式
place-items 所有项目在”网格单元”中的对齐方式
place-self 某个项目在特定的”网格单元”中的对齐方式
gap 行间间距
Correcting teacher：PHPzPHPz

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