简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid基础属性
Blogger Information
Blog 18
fans 0
comment 0
visits 15946
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基础属性
沉寂的博客
Original
801 people have browsed it

grid基础属性

1.网格容器：有如干个矩形的网格单元构成；
2.网格项目：网格容器的子元素，必须放在网格单元中；
3.网格单元：有“单元格”和网格区域两种表现形式；
4.网格轨道：有多个单元格组成，根据排列方向有行轨和列轨之分；
5.轨道间距：容器中轨道之间的间距，有行轨间距和列轨间距。

grid要写在容器中的属性

1.决定容器中要有多少列，且列宽是多少；
grid-template-columns:repeat(3,2fr);
2.决定容器中要有多少行，且行高是多少？
grid-template-rows:repeat(3,15em)；
3.在容器中的排列方法：

  1.  /* 项目在网格单元中的对齐方式 */
  2.         /*place-items: 垂直方向 水平方向; */
  3.         place-items: start center;
  4.         /* 把项目看成整体在容器中的对齐方式 */
  5.         place-content: center;

4.行轨和列轨的宽度
gap:0.5em;
5.默认行优先要设定行的默认高度，与项目中设定的行高要一致
grid-auto-rows:5em;

grid 要写在项目中的属性

1.项目在容器当中的位置
这行代码的意思是项目从坐标为1行1列的位置调到3行4列的位置
grid-area: 1/1/3/4;
该行代码是省略了起始位置，默认跳一行一列；
grid-area: 3/3;
行可以不写，让它自适应，只写列 ;
grid-area: auto / span 3;
项目本身在在单元各种的对齐方式 place-self: 垂直方向 水平方；
垂直方向与水平方向一致时，可以省略，写一个值。
place-self: center;

用grid写快速布局圣杯的案列如下：

  1.  body * {
  2.         border: solid 1px #000;
  3.       }
  4.       body {
  5.         display: grid;
  6.         grid-template-columns: 15em minmax(50vw, auto) 15em;
  7.         grid-template-rows: 3em minmax(80vh, auto) 3em;
  8.         gap: 0.5em;
  9.       }
  10.       header,
  11.       footer {
  12.         /* grid-area: 1/1/1/4; */
  13.         grid-area: auto / span 3;
  14.       }
  15.       main {
  16.         grid-area: 2/2;
  17.       }
  1.  <body>
  2.     <!-- 圣杯布局的dom结构 -->
  3.     <header>header</header>
  4.     <!-- 主体main应该有限渲染，渲染的方式是从上到下，所以main应该写在前边用grid控制
  5.     main的显示位置，用户看到的 -->
  6.     <main>main</main>
  7.     <aside class="right">right</aside>
  8.     <aside class="left">left</aside>
  9.     <footer>footer</footer>
  10.   </body>

运行结果：
圣杯

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！