CSS Grid 楂樼骇甯冨眬鎶€宸?/title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">\n <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script> <style> /* 鍩虹鏍峰紡鍙橀噺瀹氫箟 */ :root { --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --text-color: #333333; --background-color: #ffffff; --card-background: #f8f9fa; --border-color: #e9ecef; --code-background: #f6f8fa; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --radius: 8px; --transition: all 0.2s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; font-size: 16px; } /* 涓诲鍣?*/ .container { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; } /* 鏍囬鏍峰紡 */ h1 { color: var(--primary-color); font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color); } h2 { color: var(--secondary-color); font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } h3 { color: var(--text-color); font-size: 1.2rem; font-weight: 500; margin: 1.5rem 0 0.8rem; } /* 娈佃惤鍜屾枃鏈?*/ p { margin: 1rem 0; text-align: justify; } /* 鍒楄〃鏍峰紡 */ ul, ol { margin: 1rem 0; padding-left: 2rem; } li { margin: 0.5rem 0; } /* 浠ｇ爜鏍峰紡 */ pre { background-color: var(--code-background); border-radius: var(--radius); padding: 1rem; overflow-x: auto; margin: 1.5rem 0; box-shadow: var(--shadow); } code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9rem; color: var(--secondary-color); } pre code { color: var(--text-color); } /* 鍗＄墖鏍峰紡 */ .card { background-color: var(--card-background); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow); transition: var(--transition); } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } /* 鎻愮ず妗嗘牱寮?*/ .tip { background-color: rgba(67, 97, 238, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; } /* 浠ｇ爜楂樹寒 */ .hljs { background: var(--code-background) !important; } /* 鍝嶅簲寮忚璁?*/ @media (max-width: 768px) { .container { padding: 1.5rem 1rem; } h1 { font-size: 1.8rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; } } /* 澶撮儴瀵艰埅 */ header { background-color: var(--background-color); border-bottom: 1px solid var(--border-color); padding: 1rem 0; margin-bottom: 2rem; box-shadow: var(--shadow); } .header-container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; } .header-title { font-size: 1.2rem; font-weight: 700; color: var(--primary-color); } .back-link { color: var(--text-color); text-decoration: none; font-size: 0.9rem; transition: var(--transition); padding: 0.5rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-color); } .back-link:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } /* 鍝嶅簲寮忓ご閮ㄨ璁?*/ @media (max-width: 768px) { .header-container { padding: 0 1rem; } .header-title { font-size: 1.1rem; } .back-link { padding: 0.4rem 0.8rem; font-size: 0.85rem; } } /* 绀轰緥瀹瑰櫒 */ .example-container { background-color: var(--card-background); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow); } /* 缃戞牸绀轰緥 */ .grid-example { display: grid; gap: 10px; margin: 1rem 0; } .grid-item { background-color: var(--primary-light); padding: 20px; text-align: center; border-radius: var(--radius); color: white; font-weight: bold; } /* 鑷畾涔夌綉鏍奸」棰滆壊 */ .grid-item:nth-child(even) { background-color: var(--secondary-color); } </style> </head> <body>  <header> <div class="header-container"> <div class="header-title">CSS鏁欑▼</div> <a href="../article.html" class="back-link">杩斿洖鏂囩珷鍒楄〃</a> </div> </header> <div class="container"> <h1>CSS Grid 楂樼骇甯冨眬鎶€宸?/h1> <p>CSS Grid 鏄竴绉嶅己澶х殑甯冨眬绯荤粺锛屽厑璁稿紑鍙戣€呭垱寤哄鏉傜殑浜岀淮甯冨眬銆傛湰鏂囧皢浠嬬粛涓€浜?CSS Grid 鐨勯珮绾у竷灞€鎶€宸э紝甯姪寮€鍙戣€呭厖鍒嗗埄鐢ㄨ繖涓€寮哄ぇ鐨勫竷灞€宸ュ叿銆?/p> <h2>1. 鍩虹缃戞牸甯冨眬</h2> <p>棣栧厛锛岃鎴戜滑鍥為【涓€涓?CSS Grid 鐨勫熀鏈敤娉曪細</p> <pre><code class="css">.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px); gap: 10px; } .grid-item { background-color: #4361ee; padding: 20px; text-align: center; color: white; }</code></pre> <div class="example-container"> <h3>鍩虹缃戞牸绀轰緥</h3> <div class="grid-example" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px);"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> </div> <h2>2. 楂樼骇缃戞牸鎶€宸?/h2> <h3>2.1 浣跨敤 grid-template-areas</h3> <p>grid-template-areas 鏄竴绉嶇洿瑙傜殑缃戞牸甯冨眬鏂规硶锛屽厑璁稿紑鍙戣€呴€氳繃鍛藉悕鍖哄煙鏉ュ畾涔夊竷灞€銆?/p> <pre><code class="css">.grid-container { display: grid; grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 100px 1fr 100px; gap: 10px; height: 500px; } .header { grid-area: header; background-color: #4361ee; } .sidebar { grid-area: sidebar; background-color: #3a0ca3; } .content { grid-area: content; background-color: #f72585; } .footer { grid-area: footer; background-color: #4cc9f0; }</code></pre> <div class="example-container"> <h3>Grid Areas 绀轰緥</h3> <div class="grid-example" style="grid-template-areas: 'header header header' 'sidebar content content' 'footer footer footer'; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 80px; height: 300px;"> <div class="grid-item" style="grid-area: header; background-color: #4361ee;">Header</div> <div class="grid-item" style="grid-area: sidebar; background-color: #3a0ca3;">Sidebar</div> <div class="grid-item" style="grid-area: content; background-color: #f72585;">Content</div> <div class="grid-item" style="grid-area: footer; background-color: #4cc9f0;">Footer</div> </div> </div> <h3>2.2 浣跨敤 repeat() 鍜?auto-fit/auto-fill</h3> <p>repeat() 鍑芥暟缁撳悎 auto-fit 鎴?auto-fill 鍙互鍒涘缓鍝嶅簲寮忕綉鏍煎竷灞€銆?/p> <pre><code class="css">.responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } /* 鎴栬€呬娇鐢?auto-fill */ .responsive-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }</code></pre> <div class="example-container"> <h3>鍝嶅簲寮忕綉鏍肩ず渚?/h3> <div class="grid-example" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> </div> <h3>2.3 浣跨敤 grid-auto-flow</h3> <p>grid-auto-flow 鎺у埗缃戞牸椤圭殑鏀剧疆椤哄簭銆?/p> <pre><code class="css">.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; grid-auto-flow: dense; /* 瀵嗛泦鎺掑垪 */ } .item-1 { grid-column: span 2; } .item-3 { grid-row: span 2; }</code></pre> <h3>2.4 浣跨敤 minmax() 鍑芥暟</h3> <p>minmax() 鍑芥暟鍏佽璁剧疆缃戞牸杞ㄩ亾鐨勬渶灏忓拰鏈€澶у昂瀵搞€?/p> <pre><code class="css">.grid-container { display: grid; grid-template-columns: minmax(100px, 200px) 1fr minmax(150px, 300px); grid-template-rows: minmax(50px, auto) 1fr; gap: 10px; height: 400px; }</code></pre> <h2>3. 楂樼骇甯冨眬妯″紡</h2> <h3>3.1 鍦ｆ澂甯冨眬</h3> <p>浣跨敤 CSS Grid 瀹炵幇缁忓吀鐨勫湥鏉竷灞€锛?/p> <pre><code class="css">.holy-grail { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "left main right" "footer footer footer"; height: 100vh; gap: 10px; } .header { grid-area: header; background-color: #4361ee; } .left { grid-area: left; background-color: #3a0ca3; } .main { grid-area: main; background-color: #f72585; } .right { grid-area: right; background-color: #4cc9f0; } .footer { grid-area: footer; background-color: #4361ee; }</code></pre> <h3>3.2 鍗＄墖缃戞牸甯冨眬</h3> <p>浣跨敤 CSS Grid 鍒涘缓鍝嶅簲寮忓崱鐗囩綉鏍硷細</p> <pre><code class="css">.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .card { background-color: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.2s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }</code></pre> <h3>3.3 masonry 甯冨眬</h3> <p>浣跨敤 CSS Grid 瀹炵幇绫讳技鐎戝竷娴佺殑 masonry 甯冨眬锛?/p> <pre><code class="css">.masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 10px; /* 鍩虹琛岄珮 */ gap: 15px; } .masonry-item { background-color: #4361ee; border-radius: 8px; padding: 20px; color: white; } .item-1 { grid-row: span 20; /* 鍗犳嵁 20 涓熀纭€琛岄珮 */ } .item-2 { grid-row: span 25; } .item-3 { grid-row: span 15; }</code></pre> <h2>4. 鎬ц兘浼樺寲</h2> <h3>4.1 閬垮厤杩囧害浣跨敤 grid</h3> <p>瀵逛簬绠€鍗曠殑甯冨眬锛屼娇鐢?Flexbox 鍙兘鏇撮珮鏁堛€傚彧鍦ㄩ渶瑕佷簩缁村竷灞€鏃朵娇鐢?Grid銆?/p> <h3>4.2 浣跨敤 subgrid</h3> <p>subgrid 鍏佽瀛愮綉鏍肩户鎵跨埗缃戞牸鐨勮建閬撳昂瀵革紝鍑忓皯宓屽缃戞牸鐨勫鏉傛€с€?/p> <pre><code class="css">.parent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .child-grid { display: grid; grid-template-columns: subgrid; grid-column: span 3; gap: 5px; } .child-item { background-color: #4361ee; padding: 10px; color: white; }</code></pre> <h2>5. 娴忚鍣ㄥ吋瀹规€?/h2> <p>CSS Grid 鍦ㄧ幇浠ｆ祻瑙堝櫒涓緱鍒颁簡寰堝ソ鐨勬敮鎸侊紝浣嗗湪鏃ф祻瑙堝櫒涓彲鑳介渶瑕佸洖閫€鏂规銆?/p> <div class="tip"> <strong>鎻愮ず锛?/strong> 浣跨敤 @supports 瑙勫垯妫€娴嬫祻瑙堝櫒鏄惁鏀寔 CSS Grid锛? <pre><code class="css">@supports (display: grid) { .grid-container { display: grid; /* Grid 甯冨眬 */ } } @supports not (display: grid) { .grid-container { /* 鍥為€€鏂规锛屽 Flexbox 鎴栨诞鍔?*/ } }</code></pre> </div> <div class="card"> <h3>鎬荤粨</h3> <p>CSS Grid 鏄竴绉嶅己澶х殑甯冨眬绯荤粺锛岄€氳繃鏈枃浠嬬粛鐨勯珮绾ф妧宸э紝寮€鍙戣€呭彲浠ュ垱寤烘洿鍔犲鏉傚拰鐏垫椿鐨勫竷灞€銆備粠鍩虹鐨勭綉鏍煎畾涔夊埌楂樼骇鐨勫竷灞€妯″紡锛孋SS Grid 涓哄墠绔紑鍙戞彁渚涗簡鍓嶆墍鏈湁鐨勫竷灞€鑳藉姏銆傚缓璁紑鍙戣€呮繁鍏ュ涔犲拰瀹炶返杩欎簺鎶€宸э紝浠ュ厖鍒嗗彂鎸?CSS Grid 鐨勬綔鍔涖€?/p> </div> </div> <script> // 鍒濆鍖栦唬鐮侀珮浜? document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block); }); }); </script> <footer> <div class="footer-content"> <p>© 2026 骞冲钩鐨勫皬鐮寸珯鐗堟潈鎵€鏈?/p> <div class="footer-links"> <span>鐢?<a href="https://ppkjgzs.top" class="footer-link" target="_blank">骞冲钩鐨勫皬鐮寸珯</a> 鍒朵綔</span> <span class="divider">|</span> <span>浣跨敤 <span class="tech">HTML5</span>, <span class="tech">CSS3</span> 鍜?<span class="tech">Font Awesome</span> 鏋勫缓</span> <span class="divider">|</span> <a href="https://beian.miit.gov.cn/" target="_blank" class="footer-link">娴橧CP澶?025194709鍙?2</a> <span class="divider">|</span> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=13020202000680" rel="noreferrer" target="_blank" class="footer-link">鍐€鍏綉瀹夊13020202000680鍙?/a> </div> </div> </footer> <style> /* 椤佃剼鏍峰紡 */ footer { background-color: #ffffff; color: var(--text-color); padding: 2rem 1rem; text-align: center; margin-top: 3rem; font-size: 0.9rem; border-top: 1px solid var(--border-color); } .footer-content { max-width: 800px; margin: 0 auto; text-align: center; } .footer-content p { text-align: center; margin-bottom: 1rem; } .footer-links { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; font-size: 0.85rem; text-align: center; } .footer-links span { text-align: center; } .footer-link { color: var(--primary-color); text-decoration: none; } .footer-link:hover { text-decoration: underline; } .divider { color: var(--border-color); } .tech { color: var(--primary-color); font-weight: 500; } /* 椤佃剼鍝嶅簲寮忎紭鍖?*/ @media (max-width: 768px) { footer { padding: 1.5rem 1rem; font-size: 0.85rem; } .footer-links { gap: 0.8rem; font-size: 0.8rem; } } </style> </body> </html>