CSS Grid 甯冨眬瀹屽叏鎸囧崡

鍩烘湰灞炴€?/h2>

缃戞牸瀹瑰櫒灞炴€?/h3>

灞炴€?/th>	鎻忚堪	绀轰緥
grid-template-columns	瀹氫箟鍒楃殑澶у皬鍜屾暟閲?/td>	grid-template-columns: 1fr 1fr 1fr;
grid-template-rows	瀹氫箟琛岀殑澶у皬鍜屾暟閲?/td>	grid-template-rows: 100px 200px;
grid-gap	瀹氫箟缃戞牸椤逛箣闂寸殑闂磋窛	grid-gap: 10px;
grid-template-areas	瀹氫箟鍛藉悕鐨勭綉鏍煎尯鍩?/td>	grid-template-areas: "header header" "sidebar content";
justify-content	姘村钩瀵归綈缃戞牸	justify-content: center;
align-content	鍨傜洿瀵归綈缃戞牸	align-content: center;

缃戞牸椤瑰睘鎬?/h3>

灞炴€?/th>	鎻忚堪	绀轰緥
grid-column	鎸囧畾缃戞牸椤圭殑鍒椾綅缃?/td>	grid-column: 1 / 3;
grid-row	鎸囧畾缃戞牸椤圭殑琛屼綅缃?/td>	grid-row: 2 / 4;
grid-area	鎸囧畾缃戞牸椤圭殑鍛藉悕鍖哄煙	grid-area: header;
justify-self	姘村钩瀵归綈鍗曚釜缃戞牸椤?/td>	justify-self: center;
align-self	鍨傜洿瀵归綈鍗曚釜缃戞牸椤?/td>	align-self: center;

鍩烘湰绀轰緥

绀轰緥 1锛氱畝鍗曠殑涓夊垪甯冨眬

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

绀轰緥 2锛氫笉鍚屽ぇ灏忕殑琛屽垪

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

绀轰緥 3锛氬鏉傚竷灞€

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}

.item1 {
    grid-column: 1 / -1;
}

.item2 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

.item3 {
    grid-column: 3 / -1;
}

楂樼骇鎶€宸?/h2>

浣跨敤 repeat() 鍑芥暟

repeat() 鍑芥暟鍙互绠€鍖栭噸澶嶇殑鍒楁垨琛屽畾涔夛細

/* 鍒涘缓 12 涓瓑瀹藉垪 */
.grid-container {
    grid-template-columns: repeat(12, 1fr);
}

/* 鍒涘缓 4 涓?200px 瀹界殑鍒?*/
.grid-container {
    grid-template-columns: repeat(4, 200px);
}

/* 鍒涘缓 3 涓垪锛屽叾涓腑闂村垪鏄嚜閫傚簲鐨?*/
.grid-container {
    grid-template-columns: 100px repeat(2, 1fr) 100px;
}

浣跨敤 minmax() 鍑芥暟

minmax() 鍑芥暟鍙互璁剧疆杞ㄩ亾鐨勬渶灏忓拰鏈€澶у昂瀵革細

/* 鍒楀鏈€灏?100px锛屾渶澶ц嚜閫傚簲 */
.grid-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* 琛岄珮鏈€灏?50px锛屾渶澶?200px */
.grid-container {
    grid-template-rows: minmax(50px, 200px);
}

浣跨敤 auto-fit 鍜?auto-fill

auto-fit 鍜?auto-fill 鍙互鏍规嵁瀹瑰櫒瀹藉害鑷姩璋冩暣鍒楁暟锛?/p>

/* 鑷姩濉厖鍒楋紝鏍规嵁瀹瑰櫒瀹藉害璋冩暣 */
.grid-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* 鑷姩閫傚簲鍒楋紝鏍规嵁鍐呭璋冩暣 */
.grid-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

浣跨敤鍛藉悕鍖哄煙

鍛藉悕鍖哄煙鍙互浣垮竷灞€鏇村姞娓呮櫚锛?/p>

.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: auto 1fr auto;
    height: 100vh;
    gap: 10px;
}

.header {
    grid-area: header;
    background: #667eea;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background: #f8f9fa;
    padding: 20px;
}

.content {
    grid-area: content;
    background: white;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

鍝嶅簲寮忚璁?/h2>

CSS Grid 闈炲父閫傚悎鍝嶅簲寮忚璁★紝鍙互閫氳繃濯掍綋鏌ヨ杞绘澗璋冩暣甯冨眬锛?/p>

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

娴忚鍣ㄥ吋瀹规€?/h2>

CSS Grid 甯冨眬鍦ㄧ幇浠ｆ祻瑙堝櫒涓緱鍒颁簡寰堝ソ鐨勬敮鎸侊細

• Chrome 57+
• Firefox 52+
• Safari 10.1+
• Edge 16+

鎻愮ず锛?/strong> 瀵逛簬鏃ф祻瑙堝櫒锛屽彲浠ヤ娇鐢?Flexbox 浣滀负闄嶇骇鏂规锛屾垨鑰呬娇鐢?CSS Grid 鐨?IE 鍓嶇紑璇硶銆?

鏈€浣冲疄璺?/h2>

1. 浠庣Щ鍔ㄤ紭鍏堝紑濮?/strong>锛氬厛涓虹Щ鍔ㄨ澶囪璁＄畝鍗曞竷灞€锛岀劧鍚庨€氳繃濯掍綋鏌ヨ鎵╁睍
2. 浣跨敤鐩稿鍗曚綅锛氫紭鍏堜娇鐢?fr銆? 绛夌浉瀵瑰崟浣嶏紝鑰屼笉鏄浐瀹氬儚绱犲€?/li>
3. 鍚堢悊浣跨敤鍛藉悕鍖哄煙锛氬浜庡鏉傚竷灞€锛屼娇鐢ㄥ懡鍚嶅尯鍩熷彲浠ユ彁楂樹唬鐮佸彲璇绘€?/li>
4. 缁撳悎 Flexbox 浣跨敤锛欸rid 鐢ㄤ簬鏁翠綋甯冨眬锛孎lexbox 鐢ㄤ簬缁勪欢鍐呴儴甯冨眬
5. 娴嬭瘯涓嶅悓灞忓箷灏哄锛氱‘淇濆湪鍚勭璁惧涓婇兘鑳芥甯告樉绀?/li>

甯歌闂涓庤В鍐虫柟妗?/h2>

闂锛氱綉鏍奸」婧㈠嚭瀹瑰櫒

瑙ｅ喅鏂规锛?/strong> 浣跨敤 minmax() 鍑芥暟鎴栬缃悎鐞嗙殑鏈€澶у搴?/p>

闂锛氱綉鏍奸棿璺濅笉涓€鑷?/h3>

瑙ｅ喅鏂规锛?/strong> 浣跨敤缁熶竴鐨?gap 鍊硷紝閬垮厤娣峰悎浣跨敤 margin 鍜?gap

闂锛氬搷搴斿紡甯冨眬鍦ㄦ煇浜涜澶囦笂鏄剧ず寮傚父

瑙ｅ喅鏂规锛?/strong> 涓轰笉鍚屾柇鐐硅缃悎閫傜殑缃戞牸妯℃澘锛屾祴璇曞悇绉嶈澶囧昂瀵?/p>

鎬荤粨

CSS Grid 甯冨眬鏄竴绉嶅己澶х殑浜岀淮甯冨眬绯荤粺锛屽畠鎻愪緵浜嗙伒娲汇€佺洿瑙傜殑鏂瑰紡鏉ュ垱寤哄鏉傜殑椤甸潰甯冨眬銆傞€氳繃鎺屾彙 Grid 鐨勫熀鏈蹇靛拰楂樼骇鎶€宸э紝浣犲彲浠ヨ交鏉惧疄鐜板悇绉嶅搷搴斿紡璁捐锛屾彁楂樺紑鍙戞晥鐜囥€?/p>

Grid 甯冨眬鐨勪紭鍔垮湪浜庯細

• 浜岀淮甯冨眬鑳藉姏锛氬悓鏃舵帶鍒惰鍜屽垪
• 鐏垫椿鐨勮建閬撳ぇ灏忥細鏀寔澶氱鍗曚綅鍜屽嚱鏁?/li>
• 寮哄ぇ鐨勭綉鏍奸」瀹氫綅锛氱簿纭帶鍒舵瘡涓厓绱犵殑浣嶇疆
• 鑹ソ鐨勫搷搴斿紡鏀寔锛氳交鏉鹃€傚簲涓嶅悓灞忓箷灏哄
• 娓呮櫚鐨勪唬鐮佺粨鏋勶細鍑忓皯宓屽鍜屽鏉傜殑瀹氫綅浠ｇ爜

闅忕潃娴忚鍣ㄥ Grid 甯冨眬鐨勬敮鎸佽秺鏉ヨ秺濂斤紝瀹冨凡缁忔垚涓虹幇浠ｅ墠绔紑鍙戜腑涓嶅彲鎴栫己鐨勫伐鍏枫€傚紑濮嬩娇鐢?CSS Grid 鍚э紝瀹冧細璁╀綘鐨勫竷灞€宸ヤ綔鍙樺緱鏇村姞绠€鍗曞拰楂樻晥锛?/p>