Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid容器/项目属性练习（1230作业）
Blogger Information
Blog 32
fans 2
comment 2
visits 23316
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容器/项目属性练习（1230作业）
暴风战斧
Original
972 people have browsed it

Grid容器/项目属性演示

思路方案

在演示之前已经实战了grid布局了，本次将grid容器和项目属性复习一一演示；
本次复习作业，没有单独写css，直接在html中用<style></style>写样式，将属性分类进行效果演示！

作业总结

经过上一次作业grid布局实战和本次再次加强属性印象，现在对grid布局更加深刻了，感觉grid还是比flex要高效一些！

效果图

划分行、列及间距
grid-template-colums
grid-template-rows
grid-column-gap | grid-row-gap | grid-gap | gap

命名网格区域
grid-auto-flow
grid-template-area

隐式行高/列宽
grid-auto-columns

grid-auto-rows

对齐方式
align-content/justify-content
align-items/justify-content
align-self/justify-self

将指定项目放入指定单元格
grid-column-start/end
grid-row-start/end
grid-area

html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid容器项目属性</title>
  6.     <link rel="stylesheet" href="../1226/componets/public/public_reset.css">
  7.     <style>
  8.         /*网格属性演示*/
  9.         .container {
  10.             display: grid;
  12.             background-color: #fff;
  13.             padding: 10px;
  14.             margin: 10px auto;
  15.             width: 500px;
  16.             height: 300px;
  17.             /*划分行和列及间距*/
  18.             grid-template-columns: repeat(2,250px);
  19.             grid-template-rows: repeat(2,150px);
  20.             grid-gap: 10px;
  21.             /*命名网格区域*/
  22.             grid-template-areas: 'a b' 'c d';
  23.             /*隐式网格列宽与行高*/
  24.             /*grid-auto-rows: 20px;*/
  25.             /*grid-auto-flow: column;*/
  26.             /*grid-auto-columns: 60px;*/
  27.             /*项目对齐方式*/
  28.             /*justify-content: center;*/
  29.             /*align-content: center;*/
  30.             place-content: center
  31.         }
  33.         .container > .item {
  34.             display: grid;
  35.             background-color: lightgoldenrodyellow;
  36.             /*项目对齐方式*/
  37.             /*justify-items: center;*/
  38.             /*align-items: center;*/
  39.             place-items: center
  40.         }
  42.         .container > .item {
  43.             font-size: 60px;
  44.         }
  45.         .container > .item:nth-of-type(3) {
  46.             /*把项目3放进单元格b中*/
  47.             /*grid-column-start: 2;*/
  48.             /*grid-column-end: 3;*/
  49.             /*grid-row-start: 1;*/
  50.             /*grid-row-end: 2;*/
  51.             grid-area: b;
  52.             background-color: lightgreen;
  53.         }
  55.         .container > .item:nth-of-type(2) {
  56.             /*设置特定特定项目对齐*/
  57.             background-color: lightpink;
  58.             /*justify-self: start;*/
  59.             /*align-self: start;*/
  60.             place-self: start;
  61.         }
  63.     </style>
  64. </head>
  65. <body>
  66. <div class="container">
  67.     <div class="item">1</div>
  68.     <div class="item">2</div>
  69.     <div class="item">3</div>
  70.     <div class="item">4</div>
  71.     <!--<div class="item">5</div>-->
  72.     <!--<div class="item">6</div>-->
  73. </div>
  74. </body>
  75. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：现在已学到php了, 前端的作业可以抽空写, 跟上来
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