Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
root
/
myBlogs_2
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Салаа: master
Салаанууд Тагууд
myBlogs_2
/
dist
/
CSS
/
2019_04_11_01.html

2019_04_11_01.html 93 KB
Байнгын холболт Түүх Анхны өгөгдөл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>Grid 布局教程 | 看白鹿的博客</title>
    7. 

  7.     <meta name="description" content="只有敢于尝试,才能品味人生.">
    8. 

  8.     <link rel="icon" href="/logo.png">
    9. 

  9.     
    10. 

  10.     <link rel="preload" href="/assets/css/0.styles.a2e0d1a2.css" as="style"><link rel="preload" href="/assets/js/app.9558671e.js" as="script"><link rel="preload" href="/assets/js/3.515b53d6.js" as="script"><link rel="preload" href="/assets/js/69.6b654ce5.js" as="script"><link rel="preload" href="/assets/js/16.d91b81f0.js" as="script"><link rel="preload" href="/assets/js/53.2e62bed5.js" as="script"><link rel="preload" href="/assets/js/17.f2e82e43.js" as="script"><link rel="preload" href="/assets/js/18.4e4cd572.js" as="script"><link rel="preload" href="/assets/js/6.4bfb03ad.js" as="script"><link rel="preload" href="/assets/js/7.5373c3ff.js" as="script"><link rel="preload" href="/assets/js/19.3b203b0f.js" as="script"><link rel="preload" href="/assets/js/20.7a5c58ab.js" as="script"><link rel="preload" href="/assets/js/21.97e7a824.js" as="script"><link rel="preload" href="/assets/js/22.c2c71341.js" as="script"><link rel="preload" href="/assets/js/23.af6cefca.js" as="script"><link rel="preload" href="/assets/js/24.8a375cba.js" as="script"><link rel="preload" href="/assets/js/25.238ba08c.js" as="script"><link rel="preload" href="/assets/js/26.9c2191ba.js" as="script"><link rel="preload" href="/assets/js/27.aa86acfc.js" as="script"><link rel="preload" href="/assets/js/28.858301d1.js" as="script"><link rel="preload" href="/assets/js/29.808ea0c3.js" as="script"><link rel="preload" href="/assets/js/30.e9907d4a.js" as="script"><link rel="preload" href="/assets/js/31.c87c923f.js" as="script"><link rel="preload" href="/assets/js/32.4b1edff8.js" as="script"><link rel="preload" href="/assets/js/33.73f494d0.js" as="script"><link rel="preload" href="/assets/js/34.50a183ad.js" as="script"><link rel="preload" href="/assets/js/35.7df7ce1e.js" as="script"><link rel="preload" href="/assets/js/36.349910a5.js" as="script"><link rel="preload" href="/assets/js/37.d0f9f5f8.js" as="script"><link rel="preload" href="/assets/js/38.fb3a1bd1.js" as="script"><link rel="preload" href="/assets/js/39.601de504.js" as="script"><link rel="preload" href="/assets/js/40.08558ea8.js" as="script"><link rel="preload" href="/assets/js/41.9cab78b4.js" as="script"><link rel="preload" href="/assets/js/42.570f67c5.js" as="script"><link rel="preload" href="/assets/js/43.41766314.js" as="script"><link rel="preload" href="/assets/js/44.61865afc.js" as="script"><link rel="preload" href="/assets/js/45.b4d6c042.js" as="script"><link rel="preload" href="/assets/js/46.ab1face5.js" as="script"><link rel="preload" href="/assets/js/47.cfc26f59.js" as="script"><link rel="preload" href="/assets/js/48.b14654a7.js" as="script"><link rel="preload" href="/assets/js/49.6598379f.js" as="script"><link rel="preload" href="/assets/js/50.1278be5c.js" as="script"><link rel="preload" href="/assets/js/51.7fd917c5.js" as="script"><link rel="preload" href="/assets/js/52.25b15acf.js" as="script"><link rel="prefetch" href="/assets/js/10.f724d0ba.js"><link rel="prefetch" href="/assets/js/100.5834781e.js"><link rel="prefetch" href="/assets/js/101.21b366b3.js"><link rel="prefetch" href="/assets/js/102.2ae747f3.js"><link rel="prefetch" href="/assets/js/103.093cd825.js"><link rel="prefetch" href="/assets/js/104.22c3355f.js"><link rel="prefetch" href="/assets/js/105.0d2c6d27.js"><link rel="prefetch" href="/assets/js/106.57e86379.js"><link rel="prefetch" href="/assets/js/107.3859929f.js"><link rel="prefetch" href="/assets/js/108.305f4abf.js"><link rel="prefetch" href="/assets/js/109.bfba36ff.js"><link rel="prefetch" href="/assets/js/11.8006ec70.js"><link rel="prefetch" href="/assets/js/110.b67873d6.js"><link rel="prefetch" href="/assets/js/111.39112c80.js"><link rel="prefetch" href="/assets/js/112.6452e3ad.js"><link rel="prefetch" href="/assets/js/113.60c65ce6.js"><link rel="prefetch" href="/assets/js/114.955a027b.js"><link rel="prefetch" href="/assets/js/115.dd036aff.js"><link rel="prefetch" href="/assets/js/116.14835fbf.js"><link rel="prefetch" href="/assets/js/117.c79a8c90.js"><link rel="prefetch" href="/assets/js/118.c0e2c0d9.js"><link rel="prefetch" href="/assets/js/12.005e0dbb.js"><link rel="prefetch" href="/assets/js/13.ff4ae139.js"><link rel="prefetch" href="/assets/js/14.836a5132.js"><link rel="prefetch" href="/assets/js/15.6f048cfc.js"><link rel="prefetch" href="/assets/js/4.389f8161.js"><link rel="prefetch" href="/assets/js/5.d4651190.js"><link rel="prefetch" href="/assets/js/54.af31649a.js"><link rel="prefetch" href="/assets/js/55.e6c76277.js"><link rel="prefetch" href="/assets/js/56.59b2e0fa.js"><link rel="prefetch" href="/assets/js/57.e75a4f7d.js"><link rel="prefetch" href="/assets/js/58.f45feb68.js"><link rel="prefetch" href="/assets/js/59.21a7b545.js"><link rel="prefetch" href="/assets/js/60.d5bd9a2b.js"><link rel="prefetch" href="/assets/js/61.dc32bd44.js"><link rel="prefetch" href="/assets/js/62.552676dd.js"><link rel="prefetch" href="/assets/js/63.86db7a84.js"><link rel="prefetch" href="/assets/js/64.eb8d2554.js"><link rel="prefetch" href="/assets/js/65.405a53d2.js"><link rel="prefetch" href="/assets/js/66.a56465a2.js"><link rel="prefetch" href="/assets/js/67.8184d78b.js"><link rel="prefetch" href="/assets/js/68.c56c64fe.js"><link rel="prefetch" href="/assets/js/70.9a186317.js"><link rel="prefetch" href="/assets/js/71.ac0a8a64.js"><link rel="prefetch" href="/assets/js/72.b10eb62e.js"><link rel="prefetch" href="/assets/js/73.8d0ed403.js"><link rel="prefetch" href="/assets/js/74.903a6ec9.js"><link rel="prefetch" href="/assets/js/75.b4770f9b.js"><link rel="prefetch" href="/assets/js/76.38bc39a3.js"><link rel="prefetch" href="/assets/js/77.f9865d6b.js"><link rel="prefetch" href="/assets/js/78.10f6bd6c.js"><link rel="prefetch" href="/assets/js/79.a9255312.js"><link rel="prefetch" href="/assets/js/8.be3a48f4.js"><link rel="prefetch" href="/assets/js/80.02b17ee8.js"><link rel="prefetch" href="/assets/js/81.a1112357.js"><link rel="prefetch" href="/assets/js/82.4568ca67.js"><link rel="prefetch" href="/assets/js/83.49710233.js"><link rel="prefetch" href="/assets/js/84.533366f2.js"><link rel="prefetch" href="/assets/js/85.97dbc2cd.js"><link rel="prefetch" href="/assets/js/86.6514a49a.js"><link rel="prefetch" href="/assets/js/87.0c59077d.js"><link rel="prefetch" href="/assets/js/88.1df289b4.js"><link rel="prefetch" href="/assets/js/89.7269909c.js"><link rel="prefetch" href="/assets/js/9.db31af68.js"><link rel="prefetch" href="/assets/js/90.272a0e37.js"><link rel="prefetch" href="/assets/js/91.72195388.js"><link rel="prefetch" href="/assets/js/92.f6e0c47a.js"><link rel="prefetch" href="/assets/js/93.36e0cacd.js"><link rel="prefetch" href="/assets/js/94.f5c4f682.js"><link rel="prefetch" href="/assets/js/95.8408e244.js"><link rel="prefetch" href="/assets/js/96.a71354b0.js"><link rel="prefetch" href="/assets/js/97.4fb8b67b.js"><link rel="prefetch" href="/assets/js/98.785be908.js"><link rel="prefetch" href="/assets/js/99.219eebc3.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.431cfe91.js">
    11. 

  11.     <link rel="stylesheet" href="/assets/css/0.styles.a2e0d1a2.css">
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    15. 

  15.   GitHub
    16. 

  16.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    17. 

  17.   GitHub
    18. 

  18.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/CSS/" class="sidebar-link">CSS 目录</a></li><li><a href="/CSS/cases.html" class="sidebar-link">案例收集</a></li><li><a href="/CSS/2018_10_21_01.html" class="sidebar-link">1px 边框问题</a></li><li><a href="/CSS/2018_10_21_02.html" class="sidebar-link">border-style</a></li><li><a href="/CSS/2018_10_21_03.html" class="sidebar-link">box-flex使用说明</a></li><li><a href="/CSS/2018_10_21_04.html" class="sidebar-link">css动画</a></li><li><a href="/CSS/2018_10_21_05.html" class="sidebar-link">加速网站的最佳实践</a></li><li><a href="/CSS/principle.html" class="sidebar-link">CSS盒子</a></li><li><a href="/CSS/2019_04_11_01.html" class="active sidebar-link">Grid 布局教程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#一、概述" class="sidebar-link">一、概述</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#二、基本概念" class="sidebar-link">二、基本概念</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_2-1-容器和项目" class="sidebar-link">2.1 容器和项目</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_2-2-行和列" class="sidebar-link">2.2 行和列</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_2-3-单元格" class="sidebar-link">2.3 单元格</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_2-4-网格线" class="sidebar-link">2.4 网格线</a></li></ul></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#三、容器属性" class="sidebar-link">三、容器属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-1-display-属性" class="sidebar-link">3.1 display 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-2-grid-template-属性" class="sidebar-link">3.2 grid-template-* 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-3-grid-gap" class="sidebar-link">3.3 grid-*-gap</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-4-grid-template-areas-属性" class="sidebar-link">3.4 grid-template-areas 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-5-grid-auto-flow-属性" class="sidebar-link">3.5 grid-auto-flow 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-6-justify-items-属性。。。" class="sidebar-link">3.6 justify-items 属性。。。</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-7-justify-content-属性，" class="sidebar-link">3.7  justify-content 属性，...</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-8-grid-auto" class="sidebar-link">3.8 grid-auto-...</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_3-9-grid-template-属性，grid-属性" class="sidebar-link">3.9 grid-template 属性，grid 属性</a></li></ul></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#四、项目属性" class="sidebar-link">四、项目属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_4-1-grid-column" class="sidebar-link">4.1 grid-column...</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_4-2-grid-column-属性，grid-row-属性" class="sidebar-link">4.2 grid-column 属性，grid-row 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_4-3-grid-area-属性" class="sidebar-link">4.3 grid-area 属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#_4-4-justify-self-属性" class="sidebar-link">4.4 justify-self 属性...</a></li></ul></li><li class="sidebar-sub-header"><a href="/CSS/2019_04_11_01.html#五、参考链接" class="sidebar-link">五、参考链接</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="grid-布局教程"><a href="#grid-布局教程" class="header-anchor">#</a> Grid 布局教程</h1> <p>作者： 阮一峰</p> <p>日期： 2019年3月25日</p> <h2 id="一、概述"><a href="#一、概述" class="header-anchor">#</a> 一、概述</h2> <p>网格布局（Grid）是最强大的 CSS 布局方案。</p> <p>它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。</p> <div data-v-43194dd2><div class="container one" data-v-43194dd2><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>上图这样的布局，就是 <code>Grid</code> 布局的拿手好戏。</p> <p><code>Grid</code> 布局与 <code>Flex</code> 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。</p> <p><code>Flex</code> 布局是轴线布局，只能指定&quot;项目&quot;针对轴线的位置，可以看作是一维布局。<code>Grid</code> 布局则是将容器划分成&quot;行&quot;和&quot;列&quot;，产生单元格，然后指定&quot;项目所在&quot;的单元格，可以看作是二维布局。<code>Grid</code> 布局远比 <code>Flex</code> 布局强大。</p> <h2 id="二、基本概念"><a href="#二、基本概念" class="header-anchor">#</a> 二、基本概念</h2> <p>学习 Grid 布局之前，需要了解一些基本概念。</p> <h3 id="_2-1-容器和项目"><a href="#_2-1-容器和项目" class="header-anchor">#</a> 2.1 容器和项目</h3> <p>采用网格布局的区域，称为&quot;容器&quot;（container）。容器内部采用网格定位的子元素，称为&quot;项目&quot;（item）。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    19. 

  19.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    20. 

  20.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    21. 

  21.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    22. 

  22. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    23. 

  23. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，最外层的<code>&lt;div&gt;</code>元素就是容器，内层的三个<code>&lt;div&gt;</code>元素就是项目。</p> <p>注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的</p><p>元素就不是项目。Grid 布局只对项目生效。</p> <h3 id="_2-2-行和列"><a href="#_2-2-行和列" class="header-anchor">#</a> 2.2 行和列</h3> <p>容器里面的水平区域称为&quot;行&quot;（row），垂直区域称为&quot;列&quot;（column）。</p> <div class=" two"><div class="row">1</div> <div class="colums">1</div> <div class="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div> <p>上图中，水平的深色区域就是&quot;行&quot;，垂直的深色区域就是&quot;列&quot;。</p> <h3 id="_2-3-单元格"><a href="#_2-3-单元格" class="header-anchor">#</a> 2.3 单元格</h3> <p>行和列的交叉区域，称为&quot;单元格&quot;（cell）。</p> <p>正常情况下，<code>n</code>行和<code>m</code>列会产生<code>n x m</code>个单元格。比如，3行3列会产生9个单元格。</p> <h3 id="_2-4-网格线"><a href="#_2-4-网格线" class="header-anchor">#</a> 2.4 网格线</h3> <p>划分网格的线，称为&quot;网格线&quot;（grid line）。水平网格线划分出行，垂直网格线划分出列。</p> <p>正常情况下，<code>n</code>行有<code>n + 1</code>根水平网格线，<code>m</code>列有<code>m + 1</code>根垂直网格线，比如三行就有四根水平网格线。</p> <div class="three"><div class="bg-green"></div> <div class="bg-line"></div> <div class="container"><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><div class="one"><div class="left">
    24. 

  24.       Line 1
    25. 

  25.     </div> <div class="top">
    26. 

  26.       Line 1
    27. 

  27.     </div></div> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <div><div class="top">
    28. 

  28.       Line 2
    29. 

  29.     </div></div> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <!----> <div><div class="top">
    30. 

  30.       Line 3
    31. 

  31.     </div></div> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <!----> <!----> <div><div class="top">
    32. 

  32.       Line 4
    33. 

  33.     </div> <div class="right">
    34. 

  34.       Line 5
    35. 

  35.     </div></div> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <!----> <!----> <!----> <div><div class="left">
    36. 

  36.       Line 2
    37. 

  37.     </div></div> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <!----> <!----> <!----> <!----> <div><div class="left">
    38. 

  38.       Line 3
    39. 

  39.     </div></div> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other"><!----> <!----> <!----> <!----> <!----> <!----> <div><div class="left">
    40. 

  40.       Line 4
    41. 

  41.     </div> <div class="bottom">
    42. 

  42.       Line 6
    43. 

  43.     </div></div></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div><div><div class="bg"></div> <div class="row"></div> <div class="colums"></div> <div class="other" style="display:none;"><!----> <!----> <!----> <!----> <!----> <!----> <!----></div></div></div></div> <p>上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。</p> <h2 id="三、容器属性"><a href="#三、容器属性" class="header-anchor">#</a> 三、容器属性</h2> <p>Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。</p> <h3 id="_3-1-display-属性"><a href="#_3-1-display-属性" class="header-anchor">#</a> 3.1 display 属性</h3> <p><code>display: grid</code>指定一个容器采用网格布局。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    44. 

  44.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    45. 

  45. <span class="token punctuation">}</span>
    46. 

  46. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>foo
    47. 

  47. <div class="four" data-v-61a70643><div class="container" data-v-61a70643><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div>
    48. 

  48. bar</p> <p>默认情况下，容器元素都是块级元素，但也可以设成行内元素。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    49. 

  49.   <span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span>
    50. 

  50. <span class="token punctuation">}</span>
    51. 

  51. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="four" data-v-0af41bf3><span class="text" data-v-0af41bf3>foo</span> <div class="container" data-v-0af41bf3><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div> <span class="text" data-v-0af41bf3>bar</span></div> <blockquote><p>注意，设为网格布局以后，容器子元素（项目）的<code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code>和<code>column-*</code>等设置都将失效。</p></blockquote> <h3 id="_3-2-grid-template-属性"><a href="#_3-2-grid-template-属性" class="header-anchor">#</a> 3.2 grid-template-* 属性</h3> <p>grid-template-columns 属性,<br>
    52. 

  52. grid-template-rows 属性</p> <p>容器指定了网格布局以后，接着就要划分行和列。<code>grid-template-columns</code>属性定义每一列的列宽，<code>grid-template-rows</code>属性定义每一行的行高。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    53. 

  53.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    54. 

  54.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    55. 

  55.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    56. 

  56. <span class="token punctuation">}</span>
    57. 

  57. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码指定了一个三行三列的网格，列宽和行高都是<code>100px</code>。</p> <div data-v-43194dd2><div class="container one" data-v-43194dd2><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>除了使用绝对单位，也可以使用百分比。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    58. 

  58.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    59. 

  59.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 33.33% 33.33% 33.33%<span class="token punctuation">;</span>
    60. 

  60.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 33.33% 33.33% 33.33%<span class="token punctuation">;</span>
    61. 

  61. <span class="token punctuation">}</span>
    62. 

  62. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="（1）repeat"><a href="#（1）repeat" class="header-anchor">#</a> （1）repeat()</h4> <p>有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用<code>repeat()</code>函数，简化重复的值。上面的代码用<code>repeat()</code>改写如下。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    63. 

  63.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    64. 

  64.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 33.33%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    65. 

  65.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 33.33%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    66. 

  66. <span class="token punctuation">}</span>
    67. 

  67. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>repeat()</code>接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。</p> <p><code>repeat()</code>重复某种模式也是可以的。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>2<span class="token punctuation">,</span> 100px 20px 80px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    68. 

  68. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码定义了6列，第一列和第四列的宽度为<code>100px</code>，第二列和第五列为<code>20px</code>，第三列和第六列为<code>80px</code>。</p> <div data-v-030cae2b><div class="container one" data-v-030cae2b><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（2）auto-fill-关键字"><a href="#（2）auto-fill-关键字" class="header-anchor">#</a> （2）auto-fill 关键字</h4> <p>有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用<code>auto-fill</code>关键字表示自动填充。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    69. 

  69.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    70. 

  70.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> 100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    71. 

  71. <span class="token punctuation">}</span>
    72. 

  72. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码表示每列宽度<code>100px</code>，然后自动填充，直到容器不能放置更多的列。</p> <div data-v-492e803a><div class="container one" data-v-492e803a><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（3）fr-关键字"><a href="#（3）fr-关键字" class="header-anchor">#</a> （3）fr 关键字</h4> <p>为了方便表示比例关系，网格布局提供了<code>fr</code>关键字（fraction 的缩写，意为&quot;片段&quot;）。如果两列的宽度分别为<code>1fr</code>和<code>2fr</code>，就表示后者是前者的两倍。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    73. 

  73.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    74. 

  74.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr<span class="token punctuation">;</span>
    75. 

  75. <span class="token punctuation">}</span>
    76. 

  76. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码表示两个相同宽度的列。</p> <div data-v-267142c2><div class="container one" data-v-267142c2><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>fr</code>可以与绝对长度的单位结合使用，这时会非常方便。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    77. 

  77.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    78. 

  78.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 150px 1fr 2fr<span class="token punctuation">;</span>
    79. 

  79. <span class="token punctuation">}</span>
    80. 

  80. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。</p> <div data-v-9c32c068><div class="container one" data-v-9c32c068><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（4）minmax"><a href="#（4）minmax" class="header-anchor">#</a> （4）minmax()</h4> <p><code>minmax()</code>函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr <span class="token function">minmax</span><span class="token punctuation">(</span>100px<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    81. 

  81. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>minmax(100px, 1fr)</code>表示列宽不小于<code>100px</code>，不大于<code>1fr</code></p> <div data-v-546963f5><div class="container one" data-v-546963f5><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（5）auto-关键字"><a href="#（5）auto-关键字" class="header-anchor">#</a> （5）auto 关键字</h4> <p><code>auto</code>关键字表示由浏览器自己决定长度。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px auto 100px<span class="token punctuation">;</span>
    82. 

  82. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了<code>min-width</code>，且这个值大于最大宽度。</p> <div data-v-bff890b6><div class="container one" data-v-bff890b6><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（6）网格线的名称"><a href="#（6）网格线的名称" class="header-anchor">#</a> （6）网格线的名称</h4> <p><code>grid-template-columns</code>属性和<code>grid-template-rows</code>属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    83. 

  83.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    84. 

  84.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [c1] 100px [c2] 100px [c3] auto [c4]<span class="token punctuation">;</span>
    85. 

  85.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [r1] 100px [r2] 100px [r3] auto [r4]<span class="token punctuation">;</span>
    86. 

  86. <span class="token punctuation">}</span>
    87. 

  87. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。</p> <p>网格布局允许同一根线有多个名字，比如[fifth-line row-5]。</p> <div data-v-092c0bd6><div class="container one" data-v-092c0bd6><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h4 id="（7）布局实例"><a href="#（7）布局实例" class="header-anchor">#</a> （7）布局实例</h4> <p><code>grid-template-columns</code>属性对于网页布局非常有用。两栏式布局只需要一行代码。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrapper</span> <span class="token punctuation">{</span>
    88. 

  88.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    89. 

  89.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 70% 30%<span class="token punctuation">;</span>
    90. 

  90. <span class="token punctuation">}</span>
    91. 

  91. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码将左边栏设为70%，右边栏设为30%。</p> <div data-v-3db2b1c8><div class="container one" data-v-3db2b1c8><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>传统的十二网格布局，写起来也很容易。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>12<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    92. 

  92. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div data-v-3526bc5d><div class="container one" data-v-3526bc5d><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h3 id="_3-3-grid-gap"><a href="#_3-3-grid-gap" class="header-anchor">#</a> 3.3 grid-*-gap</h3> <p>grid-row-gap 属性<br>
    93. 

  93. grid-column-gap 属性，<br>
    94. 

  94. grid-gap 属性<br></p> <hr> <p><code>grid-row-gap</code>属性设置行与行的间隔（行间距），<code>grid-column-gap</code>属性设置列与列的间隔（列间距）。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    95. 

  95.   <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    96. 

  96.   <span class="token property">grid-column-gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    97. 

  97. <span class="token punctuation">}</span>
    98. 

  98. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，<code>grid-row-gap</code>用于设置行间距，<code>grid-column-gap</code>用于设置列间距</p> <div class="box" data-v-92d226ee><div class="container one" data-v-92d226ee><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>grid-gap</code>属性是<code>grid-column-gap</code>和<code>grid-row-gap</code>的合并简写形式，语法如下。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-gap</span><span class="token punctuation">:</span> &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;<span class="token punctuation">;</span>
    99. 

  99. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>因此，上面一段 CSS 代码等同于下面的代码。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    100. 

  100.   <span class="token property">grid-gap</span><span class="token punctuation">:</span> 20px 20px<span class="token punctuation">;</span>
    101. 

  101. <span class="token punctuation">}</span>
    102. 

  102. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>如果<code>grid-gap</code>省略了第二个值，浏览器认为第二个值等于第一个值。</p> <blockquote><p>根据最新标准，上面三个属性名的<code>grid-</code>前缀已经删除，<code>grid-column-gap</code>和<code>grid-row-gap</code>写成<code>column-gap</code>和<code>row-gap</code>，<code>grid-gap</code>写成<code>gap</code>。</p></blockquote> <h3 id="_3-4-grid-template-areas-属性"><a href="#_3-4-grid-template-areas-属性" class="header-anchor">#</a> 3.4 grid-template-areas 属性</h3> <p>网格布局允许指定&quot;区域&quot;（area），一个区域由单个或多个单元格组成。<code>grid-template-areas</code>属性用于定义区域。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    103. 

  103.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    104. 

  104.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    105. 

  105.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    106. 

  106.   <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'a b c'</span>
    107. 

  107.                        <span class="token string">'d e f'</span>
    108. 

  108.                        <span class="token string">'g h i'</span><span class="token punctuation">;</span>
    109. 

  109. <span class="token punctuation">}</span>
    110. 

  110. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>上面代码先划分出9个单元格，然后将其定名为<code>a</code>到<code>i</code>的九个区域，分别对应这九个单元格。</p> <p>多个单元格合并成一个区域的写法如下。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'a a a'</span>
    111. 

  111.                      <span class="token string">'b b b'</span>
    112. 

  112.                      <span class="token string">'c c c'</span><span class="token punctuation">;</span>
    113. 

  113. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码将9个单元格分成<code>a</code>、<code>b</code>、<code>c</code>三个区域。</p> <p>下面是一个布局实例。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">&quot;header header header&quot;</span>
    114. 

  114.                      <span class="token string">&quot;main main sidebar&quot;</span>
    115. 

  115.                      <span class="token string">&quot;footer footer footer&quot;</span><span class="token punctuation">;</span>
    116. 

  116. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，顶部是页眉区域<code>header</code>，底部是页脚区域<code>footer</code>，中间部分则为<code>main</code>和<code>sidebar</code>。</p> <p>如果某些区域不需要利用，则使用&quot;点&quot;（<code>.</code>）表示。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'a . c'</span>
    117. 

  117.                      <span class="token string">'d . f'</span>
    118. 

  118.                      <span class="token string">'g . i'</span><span class="token punctuation">;</span>
    119. 

  119. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。</p> <blockquote><p>注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为<code>区域名-start</code>，终止网格线自动命名为<code>区域名-end</code>。<br><br>
    120. 

  120. 比如，区域名为<code>header</code>，则起始位置的水平网格线和垂直网格线叫做<code>header-start</code>，终止位置的水平网格线和垂直网格线叫做<code>header-end</code>。</p></blockquote> <h3 id="_3-5-grid-auto-flow-属性"><a href="#_3-5-grid-auto-flow-属性" class="header-anchor">#</a> 3.5 grid-auto-flow 属性</h3> <p>划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是&quot;先行后列&quot;，即先填满第一行，再开始放入第二行，即下图数字的顺序。</p> <div data-v-43194dd2><div class="container one" data-v-43194dd2><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>这个顺序由<code>grid-auto-flow</code>属性决定，默认值是<code>row</code>，即&quot;先行后列&quot;。也可以将它设成<code>column</code>，变成&quot;先列后行&quot;。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
    121. 

  121. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码设置了column以后，放置顺序就变成了下图。</p> <div class="box" data-v-53d98e9a><div class="container one" data-v-53d98e9a><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>grid-auto-flow</code>属性除了设置成<code>row</code>和<code>column</code>，还可以设成<code>row dense</code>和<code>column dense</code>。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。</p> <p>下面的例子让1号项目和2号项目各占据两个单元格，然后在默认的<code>grid-auto-flow: row</code>情况下，会产生下面这样的布局。</p> <div class="box-16"><div class="container one-16"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。</p> <p>现在修改设置，设为<code>row dense</code>，表示&quot;先行后列&quot;，并且尽可能紧密填满，尽量不出现空格。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> row dense<span class="token punctuation">;</span>
    122. 

  122. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-17"><div class="container one-17"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。</p> <p>如果将设置改为<code>column dense</code>，表示&quot;先列后行&quot;，并且尽量填满空格。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column dense<span class="token punctuation">;</span>
    123. 

  123. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-18"><div class="container one-18"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>上图会先填满第一列，再填满第2列，所以3号项目在第一列，4号项目在第二列。8号项目和9号项目被挤到了第四列。</p> <h3 id="_3-6-justify-items-属性。。。"><a href="#_3-6-justify-items-属性。。。" class="header-anchor">#</a> 3.6 justify-items 属性。。。</h3> <p>justify-items 属性，<br>
    124. 

  124. align-items 属性，<br>
    125. 

  125. place-items 属性</p> <p><code>justify-items</code>属性设置单元格内容的水平位置（左中右），<code>align-items</code>属性设置单元格内容的垂直位置（上中下）。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    126. 

  126.   <span class="token property">justify-items</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
    127. 

  127.   <span class="token property">align-items</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
    128. 

  128. <span class="token punctuation">}</span>
    129. 

  129. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>这两个属性的写法完全相同，都可以取下面这些值。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>start：对齐单元格的起始边缘。
    130. 

  130. end：对齐单元格的结束边缘。
    131. 

  131. center：单元格内部居中。
    132. 

  132. stretch：拉伸，占满单元格的整个宽度（默认值）。
    133. 

  133. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    134. 

  134.   <span class="token property">justify-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
    135. 

  135. <span class="token punctuation">}</span>
    136. 

  136. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码表示，单元格的内容左对齐，效果如下图。</p> <div class="box-19"><div class="container one-19"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    137. 

  137.   <span class="token property">align-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
    138. 

  138. <span class="token punctuation">}</span>
    139. 

  139. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码表示，单元格的内容头部对齐，效果如下图。</p> <div class="box-20"><div class="container one-20"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>place-items</code>属性是<code>align-items</code>属性和<code>justify-items</code>属性的合并简写形式。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">place-items</span><span class="token punctuation">:</span> &lt;align-items&gt; &lt;justify-items&gt;<span class="token punctuation">;</span>
    140. 

  140. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面是一个例子。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">place-items</span><span class="token punctuation">:</span> start end<span class="token punctuation">;</span>
    141. 

  141. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-21"><div class="container one-21"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>如果省略第二个值，则浏览器认为与第一个值相等。</p> <h3 id="_3-7-justify-content-属性，"><a href="#_3-7-justify-content-属性，" class="header-anchor">#</a> 3.7  justify-content 属性，...</h3> <p><code>justify-content</code>属性是整个内容区域在容器里面的水平位置（左中右），<code>align-content</code>属性是整个内容区域的垂直位置（上中下）。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
    142. 

  142.   <span class="token property">justify-content</span><span class="token punctuation">:</span> start | end | center | stretch | space-around | space-between | space-evenly<span class="token punctuation">;</span>
    143. 

  143.   <span class="token property">align-content</span><span class="token punctuation">:</span> start | end | center | stretch | space-around | space-between | space-evenly<span class="token punctuation">;</span>  
    144. 

  144. <span class="token punctuation">}</span>
    145. 

  145. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以<code>justify-content</code>属性为例，<code>align-content</code>属性的图完全一样，只是将水平方向改成垂直方向。）</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>start - 对齐容器的起始边框。
    146. 

  146. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-22"><div class="container one-22"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>end - 对齐容器的结束边框。
    147. 

  147. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-23"><div class="container one-23"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>center - 容器内部居中。
    148. 

  148. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-24"><div class="container one-24"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>stretch - 项目大小没有指定时，拉伸占据整个网格容器。
    149. 

  149. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-25"><div class="container one-25"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
    150. 

  150. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-26"><div class="container one-26"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
    151. 

  151. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-27"><div class="container one-27"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <div class="language- line-numbers-mode"><pre class="language-text"><code>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
    152. 

  152. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-28"><div class="container one-28"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>place-content</code>属性是<code>align-content</code>属性和<code>justify-content</code>属性的合并简写形式。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>place-content: &lt;align-content&gt; &lt;justify-content&gt;
    153. 

  153. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面是一个例子。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>place-content: space-around space-evenly;
    154. 

  154. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="box-29"><div class="container one-29"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>如果省略第二个值，浏览器就会假定第二个值等于第一个值。</p> <h3 id="_3-8-grid-auto"><a href="#_3-8-grid-auto" class="header-anchor">#</a> 3.8 grid-auto-...</h3> <p>grid-auto-columns 属性，<br>
    155. 

  155. grid-auto-rows 属性</p> <p>有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。</p> <p><code>grid-auto-columns</code>属性和<code>grid-auto-rows</code>属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与<code>grid-template-columns</code>和<code>grid-template-rows</code>完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。</p> <p>下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>
    156. 

  156. <span class="token selector">.container</span> <span class="token punctuation">{</span>
    157. 

  157.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    158. 

  158.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    159. 

  159.   <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span>
    160. 

  160.   <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> 
    161. 

  161. <span class="token punctuation">}</span>
    162. 

  162. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="box-30"><div class="container one-30"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h3 id="_3-9-grid-template-属性，grid-属性"><a href="#_3-9-grid-template-属性，grid-属性" class="header-anchor">#</a> 3.9 grid-template 属性，grid 属性</h3> <p><code>grid-template</code>属性是<code>grid-template-columns</code>、<code>grid-template-rows</code>和<code>grid-template-areas</code>这三个属性的合并简写形式。</p> <p><code>grid</code>属性是<code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、 <code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code>这六个属性的合并简写形式。</p> <p>从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。</p> <h2 id="四、项目属性"><a href="#四、项目属性" class="header-anchor">#</a> 四、项目属性</h2> <p>下面这些属性定义在项目上面。</p> <h3 id="_4-1-grid-column"><a href="#_4-1-grid-column" class="header-anchor">#</a> 4.1 grid-column...</h3> <p>grid-column-start 属性，<br>
    163. 

  163. grid-column-end 属性，<br>
    164. 

  164. grid-row-start 属性，<br>
    165. 

  165. grid-row-end 属性</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>grid-column-start属性：左边框所在的垂直网格线
    166. 

  166. grid-column-end属性：右边框所在的垂直网格线
    167. 

  167. grid-row-start属性：上边框所在的水平网格线
    168. 

  168. grid-row-end属性：下边框所在的水平网格线
    169. 

  169. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    170. 

  170.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
    171. 

  171.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
    172. 

  172. <span class="token punctuation">}</span>
    173. 

  173. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="box-31"><div class="container one-31"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。</p> <p>除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的<code>grid-auto-flow</code>属性决定，这个属性的默认值是<code>row</code>，因此会&quot;先行后列&quot;进行排列。读者可以把这个属性的值分别改成<code>column</code>、<code>row dense</code>和<code>column dense</code>，看看其他项目的位置发生了怎样的变化。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    174. 

  174.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    175. 

  175.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    176. 

  176.   <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
    177. 

  177.   <span class="token property">grid-row-end</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
    178. 

  178. <span class="token punctuation">}</span>
    179. 

  179. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="box-32"><div class="container one-32"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    180. 

  180.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> header-start<span class="token punctuation">;</span>
    181. 

  181.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> header-end<span class="token punctuation">;</span>
    182. 

  182. <span class="token punctuation">}</span>
    183. 

  183. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，左边框和右边框的位置，都指定为网格线的名字。</p> <p>这四个属性的值还可以使用<code>span</code>关键字，表示&quot;跨越&quot;，即左右边框（上下边框）之间跨越多少个网格。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    184. 

  184.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>
    185. 

  185. <span class="token punctuation">}</span>
    186. 

  186. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码表示，1号项目的左边框距离右边框跨越2个网格。</p> <div class="box-33"><div class="container one-33"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>这与下面的代码效果完全一样。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    187. 

  187.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>
    188. 

  188. <span class="token punctuation">}</span>
    189. 

  189. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>使用这四个属性，如果产生了项目的重叠，则使用<code>z-index</code>属性指定项目的重叠顺序。</p> <h3 id="_4-2-grid-column-属性，grid-row-属性"><a href="#_4-2-grid-column-属性，grid-row-属性" class="header-anchor">#</a> 4.2 grid-column 属性，grid-row 属性</h3> <p><code>grid-column</code>属性是<code>grid-column-start</code>和<code>grid-column-end</code>的合并简写形式，<code>grid-row</code>属性是<code>grid-row-start</code>属性和<code>grid-row-end</code>的合并简写形式。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>
    190. 

  190.   <span class="token property">grid-column</span><span class="token punctuation">:</span>  / <span class="token punctuation">;</span>
    191. 

  191.   <span class="token property">grid-row</span><span class="token punctuation">:</span>  / <span class="token punctuation">;</span>
    192. 

  192. <span class="token punctuation">}</span>
    193. 

  193. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>下面是一个例子。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    194. 

  194.   <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
    195. 

  195.   <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span>
    196. 

  196. <span class="token punctuation">}</span>
    197. 

  197. <span class="token comment">/* 等同于 */</span>
    198. 

  198. <span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    199. 

  199.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    200. 

  200.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    201. 

  201.   <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    202. 

  202.   <span class="token property">grid-row-end</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
    203. 

  203. <span class="token punctuation">}</span>
    204. 

  204. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面代码中，项目<code>item-1</code>占据第一行，从第一根列线到第三根列线。</p> <p>这两个属性之中，也可以使用<code>span</code>关键字，表示跨越多少个网格。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    205. 

  205.   <span class="token property">background</span><span class="token punctuation">:</span> #b03532<span class="token punctuation">;</span>
    206. 

  206.   <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
    207. 

  207.   <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
    208. 

  208. <span class="token punctuation">}</span>
    209. 

  209. <span class="token comment">/* 等同于 */</span>
    210. 

  210. <span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    211. 

  211.   <span class="token property">background</span><span class="token punctuation">:</span> #b03532<span class="token punctuation">;</span>
    212. 

  212.   <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span>
    213. 

  213.   <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span>
    214. 

  214. <span class="token punctuation">}</span>
    215. 

  215. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。</p> <div class="box-34"><div class="container one-34"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p>斜杠以及后面的部分可以省略，默认跨越一个网格。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    216. 

  216.   <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    217. 

  217.   <span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    218. 

  218. <span class="token punctuation">}</span>
    219. 

  219. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面代码中，项目<code>item-1</code>占据左上角第一个网格。</p> <h3 id="_4-3-grid-area-属性"><a href="#_4-3-grid-area-属性" class="header-anchor">#</a> 4.3 grid-area 属性</h3> <p><code>grid-area</code>属性指定项目放在哪一个区域。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    220. 

  220.   <span class="token property">grid-area</span><span class="token punctuation">:</span> e<span class="token punctuation">;</span>
    221. 

  221. <span class="token punctuation">}</span>
    222. 

  222. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面代码中，1号项目位于<code>e</code>区域，效果如下图。</p> <div class="box-35"><div class="container one-35"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>grid-area</code>属性还可用作<code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code>的合并简写形式，直接指定项目的位置。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>
    223. 

  223.   <span class="token property">grid-area</span><span class="token punctuation">:</span> &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;<span class="token punctuation">;</span>
    224. 

  224. <span class="token punctuation">}</span>
    225. 

  225. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>下面是一个例子。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    226. 

  226. <span class="token comment">/* 这种写法有可能被预编译处理器认为需要进行计算，所以推荐分开写 */</span>
    227. 

  227.   <span class="token property">grid-area</span><span class="token punctuation">:</span> 1 / 1 / 3 / 3<span class="token punctuation">;</span>
    228. 

  228. <span class="token punctuation">}</span>
    229. 

  229. <span class="token comment">/* 推荐 */</span>
    230. 

  230. <span class="token selector">.item-1</span> <span class="token punctuation">{</span>
    231. 

  231.   <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    232. 

  232.   <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    233. 

  233.   <span class="token property">grid-row-end</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    234. 

  234.   <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    235. 

  235. <span class="token punctuation">}</span>
    236. 

  236. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="box-36"><div class="container one-36"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <h3 id="_4-4-justify-self-属性"><a href="#_4-4-justify-self-属性" class="header-anchor">#</a> 4.4 justify-self 属性...</h3> <p>justify-self 属性，<br>
    237. 

  237. align-self 属性，<br>
    238. 

  238. place-self 属性</p> <p><code>justify-self</code>属性设置单元格内容的水平位置（左中右），跟<code>justify-items</code>属性的用法完全一致，但只作用于单个项目。</p> <p><code>align-self</code>属性设置单元格内容的垂直位置（上中下），跟<code>align-items</code>属性的用法完全一致，也是只作用于单个项目。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>
    239. 

  239.   <span class="token property">justify-self</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
    240. 

  240.   <span class="token property">align-self</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
    241. 

  241. <span class="token punctuation">}</span>
    242. 

  242. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>这两个属性都可以取下面四个值。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>start：对齐单元格的起始边缘。
    243. 

  243. end：对齐单元格的结束边缘。
    244. 

  244. center：单元格内部居中。
    245. 

  245. stretch：拉伸，占满单元格的整个宽度（默认值）。
    246. 

  246. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>下面是<code>justify-self: start</code>的例子。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item-1</span>  <span class="token punctuation">{</span>
    247. 

  247.   <span class="token property">justify-self</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
    248. 

  248. <span class="token punctuation">}</span>
    249. 

  249. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="box-37"><div class="container one-37"><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div><div><p>4</p></div><div><p>5</p></div><div><p>6</p></div><div><p>7</p></div><div><p>8</p></div><div><p>9</p></div></div></div> <p><code>place-self</code>属性是<code>align-self</code>属性和<code>justify-self</code>属性的合并简写形式。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>place-self: &lt;align-self&gt; &lt;justify-self&gt;;
    250. 

  250. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面是一个例子。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>place-self: center center;
    251. 

  251. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>如果省略第二个值，place-self属性会认为这两个值相等。</p> <h2 id="五、参考链接"><a href="#五、参考链接" class="header-anchor">#</a> 五、参考链接</h2> <ul><li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener noreferrer">A Complete Guide to Grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, by Chris House</li> <li><a href="https://webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module--cms-1079" target="_blank" rel="noopener noreferrer">Understanding the CSS Grid Layout Module<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, by Ian Yates</li> <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-an-off-canvas-navigation-with-css-grid--cms-28191" target="_blank" rel="noopener noreferrer">How to Build an Off-Canvas Navigation With CSS Grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, Ian Yates</li> <li><a href="https://code.tutsplus.com/tutorials/introduction-to-css-grid-layout-with-examples--cms-25392" target="_blank" rel="noopener noreferrer">Introduction to the CSS Grid Layout With Examples<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, Dogacan Bilgili</li> <li><a href="http://learncssgrid.com/" target="_blank" rel="noopener noreferrer">Learn CSS Grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, Jonathan Suh</li> <li><a href="https://blog.theodo.fr/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/" target="_blank" rel="noopener noreferrer">How I stopped using Bootstrap's layout thanks to CSS Grid<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, Cédric Kui</li></ul> <p>（完）</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/4/2019, 12:48:37 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    252. 

  252.       ←
    253. 

  253.       <a href="/CSS/principle.html" class="prev">CSS盒子</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
    254. 

  254.     <script src="/assets/js/app.9558671e.js" defer></script><script src="/assets/js/3.515b53d6.js" defer></script><script src="/assets/js/69.6b654ce5.js" defer></script><script src="/assets/js/16.d91b81f0.js" defer></script><script src="/assets/js/53.2e62bed5.js" defer></script><script src="/assets/js/17.f2e82e43.js" defer></script><script src="/assets/js/18.4e4cd572.js" defer></script><script src="/assets/js/6.4bfb03ad.js" defer></script><script src="/assets/js/7.5373c3ff.js" defer></script><script src="/assets/js/19.3b203b0f.js" defer></script><script src="/assets/js/20.7a5c58ab.js" defer></script><script src="/assets/js/21.97e7a824.js" defer></script><script src="/assets/js/22.c2c71341.js" defer></script><script src="/assets/js/23.af6cefca.js" defer></script><script src="/assets/js/24.8a375cba.js" defer></script><script src="/assets/js/25.238ba08c.js" defer></script><script src="/assets/js/26.9c2191ba.js" defer></script><script src="/assets/js/27.aa86acfc.js" defer></script><script src="/assets/js/28.858301d1.js" defer></script><script src="/assets/js/29.808ea0c3.js" defer></script><script src="/assets/js/30.e9907d4a.js" defer></script><script src="/assets/js/31.c87c923f.js" defer></script><script src="/assets/js/32.4b1edff8.js" defer></script><script src="/assets/js/33.73f494d0.js" defer></script><script src="/assets/js/34.50a183ad.js" defer></script><script src="/assets/js/35.7df7ce1e.js" defer></script><script src="/assets/js/36.349910a5.js" defer></script><script src="/assets/js/37.d0f9f5f8.js" defer></script><script src="/assets/js/38.fb3a1bd1.js" defer></script><script src="/assets/js/39.601de504.js" defer></script><script src="/assets/js/40.08558ea8.js" defer></script><script src="/assets/js/41.9cab78b4.js" defer></script><script src="/assets/js/42.570f67c5.js" defer></script><script src="/assets/js/43.41766314.js" defer></script><script src="/assets/js/44.61865afc.js" defer></script><script src="/assets/js/45.b4d6c042.js" defer></script><script src="/assets/js/46.ab1face5.js" defer></script><script src="/assets/js/47.cfc26f59.js" defer></script><script src="/assets/js/48.b14654a7.js" defer></script><script src="/assets/js/49.6598379f.js" defer></script><script src="/assets/js/50.1278be5c.js" defer></script><script src="/assets/js/51.7fd917c5.js" defer></script><script src="/assets/js/52.25b15acf.js" defer></script>
    255. 

  255.   </body>
    256. 

  256. </html>
    257.