馃摙鍢匡紒澶у濂斤紝鎴戞槸娉曞尰锛屾不鐤楃鐨勫墠绔爜鐚筐煇掞紝鍜屼唬鐮佸璇濓紝鑱嗗惉浠栦滑鍐呭績鐨勫０闊筹紝鏈熷緟浣犱滑鐨勭偣璧烉煈嶅拰鍏虫敞鉃曠編椋熺郴缁熻櫄鎷熸祦鍏夐敭鐩樻槸浠€涔堬紵閿洏涓嶆槸鍒嗚酱鐨勫悧锛熼敭鐩樹粈涔堟椂鍊欐湁椋熺墿绯荤粺浜嗭紵鎴戝彲浠ュ悆鍚楋紵搴熻瘽涓嶅璇达紝浠婂ぉ鐨勪富瑙掟煈€鍛紵鏄笉鏄緢閰凤紵鍏跺疄鎴戝湪琚佽€佸笀鐨勫叕寮€璇句笂灏辩湅鍒颁簡杩欎釜鏁堟灉锛屽繊涓嶄綇绗竴鐪煎氨鐖变笂浜嗐€傛垜寰堝枩娆€傛垜涓嶅緱涓嶅仛涓€涓€傛垜鍦ㄩ敭鐩樹笂鍔犱簡涓€涓懠鍚哥伅銆傛晥鏋滄洿鐐紝鍊煎緱澶у馃榿锛屽揩鏉ュ拰鎴戜竴璧峰疄鐜板睘浜庝綘鑷繁鐨勭偒閰烽敭鐩橉煈簡瑙ｇ綉鏍煎竷灞€鑷?994骞达紝HarkenWimletti鍜孊urtBoss鍐冲畾鍚堜綔璁捐CSS锛岃嚦浠婂凡鏈?7骞寸幇鍦紝姣旀垜澶у搱鍝堬紒甯冨眬涓€鐩存槸鏈€閲嶈鐨勫姛鑳姐€備互鍓嶉兘鏄敤float鍜宑lear锛屼絾鏄痜loat涓昏鏄敤鏉ユ妸鏂囧瓧鍖呰９鍦ㄥ浘鐗囦笂鐨勩€備娇鐢ㄥ畠杩涜甯冨眬鏄剧劧涓嶆槸涓€绉嶅悎閫傜殑鏂瑰紡銆傚悗鏉ュ脊鎬у竷灞€鍜岀綉鏍煎竷灞€濉ˉ浜嗕竴浜涚┖鐧姐€傞敭鐩樺竷灞€鐩墠涓昏浣跨敤缃戞牸甯冨眬鏉ュ疄鐜般€?.鍒涘缓涓€涓綉鏍煎鍣ㄧ綉鏍煎竷灞€鐨勭涓€姝ユ槸鍒涘缓涓€涓綉鏍煎鍣紝杩欎笌鍦ㄥ脊鎬х洅甯冨眬涓畾涔変竴涓脊鎬у鍣ㄩ潪甯哥浉浼笺€傚畠浠兘瀹氫箟涓€涓埗鍏冪礌涓篻rid鎴杅lex瀹瑰櫒锛屽鍣ㄧ敓鎴恎rid甯冨眬鍚庯紝鍏跺瓙鍏冪礌鍏ㄩ儴涓篻rid鍏冪礌锛宖lex瀹瑰櫒鐨勫瓙鍏冪礌涓篺lex鍏冪礌銆備粠杩欎釜瑙掑害鏉ョ湅锛岀綉鏍煎竷灞€缁ф壙浜嗗脊鎬х洅妯″瀷鐨勫緢澶氭蹇点€傜涓€绉嶉€夋嫨鏄粰闇€瑕佽缃甮rid瀹瑰櫒鐨勫厓绱犳坊鍔燿isplay:grid锛?.璁剧疆瀹瑰櫒grid-template-columns锛堝垪锛夊拰grid-template-rows锛堣锛夌殑琛屽拰鍒楋紝濡傚浘鍥句腑锛歳epeat鍑芥暟鏄竴绉嶇畝鍐橣orm锛屽綋琛屾暟鎴栧垪鏁拌揪鍒颁竴瀹氭暟閲忔椂锛屽彲浠ヤ娇鐢╮epeat鍑芥暟鏉ョ畝鍖栭噸澶嶅€硷紝杩樻湁鍏朵粬鍑犵鍐欐硶锛屽涓嬶細3.gapbetweencells鎴戜滑鍙互閫氳繃gap鏉ヨ缃崟鍏冩牸涔嬮棿鐨勫搴︼紝瀹冩槸涓€涓鍚堝睘鎬э紝row-gap鍙互璁剧疆琛岄棿璺濓紝column-gap鍙互璁剧疆鍒楅棿璺濄€?.鍗曞厓鏍煎唴閮ㄥ榻愬崟鍏冩牸榛樿姘村钩鍜屽瀭鐩存媺浼革紝浠ュ～婊℃暣涓崟鍏冩牸銆傜湅鍔ㄥ浘鏇寸敓鍔煒佹垜浠彲浠ラ€氳繃justify-items:center璁剧疆姘村钩鏂瑰悜鐨勬帓鍒楁柟寮忥紝浣跨敤align-item:center璁剧疆鍨傜洿鏂瑰悜鐨勬帓鍒楁柟寮忥紝鍙兘鐨勫€兼槸涓€鏍风殑:浠庡乏寮€濮媩缁撴潫鍙硘涓績|stretchstretch(default)鏄殑锛屽畠浠嶇劧鏄竴涓鍚堝睘鎬э紝鎴戜滑鍙互閫氳繃place-items:center涓績灞炴€у垎鍒缃瀭鐩村拰姘村钩鎺掑垪銆?.鍗曞厓鏍煎畾浣嶉粯璁ゆ儏鍐典笅锛屾瘡涓崟鍏冩牸鍗犳嵁涓€涓崟鍏冩牸锛屼絾鏄垜浠彲浠ラ€氳繃璁剧疆grid-area鏉ユ敼鍙樿繖涓€鐐逛竴绉嶆柟寮忥紝璁╀竴涓暟瀛楀崰鎹洓涓牸瀛愪娇鐢ㄦ柟娉曪細grid-area:璧峰琛岃鍙?璧峰鍒楄鍙?endrowlinenumber/endcolumnlinenumber馃摙渚嬪瓙锛氳缃瓙鍏冪礌grid绫诲悕span2-area:1/2/-2/4;ok锛屼互涓婂氨鏄祦鍏夐敭鐩橀渶瑕佺殑鐭ヨ瘑鐐逛簡锛屼絾鏄綉鏍煎竷灞€鐨勭煡璇嗙偣杩樻槸寰堝鐨勶紝鎴戝氨涓嶄竴涓€浠嬬粛浜嗭紝寮€濮嬫垜浠殑閿洏瀹炵幇馃檰鈥嶏笍HTML缁撴瀯鎼缓缁撴瀯甯冨眬寰堢畝鍗曘€傛暣浣撳氨鏄竴涓敭鐩橈紝姣忎釜閿兘鏄竴涓敭锛岄噷闈㈠寘鍚枃瀛楀拰鍥炬爣锛屽彲浠ョ敤span鍏冪礌鏉ヨ〃绀恒€傛湁濡備笅甯冨眬锛岀敤CSS寰堣姳鍝ㄣ€傛牴鎹互涓婁俊鎭紝棣栧厛涓洪敭鐩樻暣浣撹缃牱寮忥紝寰楀埌濡備笅鏍峰紡銆傞偅涔堟垜浠鍋氱殑灏辨槸璁剧疆姣忎釜鎸夐敭鐨勬牱寮忥紝閿洏灏卞彉鎴愯繖鏍蜂簡銆傛槸涓嶆槸鏈夌偣馃槑鐨勬劅瑙夛紝鑷冲皯鐪嬭捣鏉ュ儚涓€鎶婇挜鍖欙紝鍒潃鎬ワ紝杩樻病瀹屽憿锛侌煒傛垜浠彂鐜版湁浜涙寜閽瘮杈冮暱銆傝繖涓椂鍊欙紝鎴戜滑鍙渶瑕佽涓埆鐨勬寜閽崰鎹洿澶氱殑鏍煎瓙鍗冲彲銆傝繖閲屾垜浠彲浠ュ啓涓€涓壒娈婃寜閽昂瀵哥殑绫诲悕锛岀劧鍚庢妸瀹冨姞鍒伴渶瑕佹敼鍙樼殑鎸夐挳涓婐煒滆繖鏃跺€欙紝鎴戜滑灏卞緱鍒颁簡鐪嬭捣鏉ユ槸杩欐牱鐨勶紝鍛靛懙锛佹劅瑙夊樊涓嶅锛岄鑹蹭篃宸笉澶氾紝鍔犳补锛佹坊鍔犻鑹拆煒氶鑹茬殑澶勭悊杩樻槸鐢变笓闂ㄧ殑绫诲悕鏉ュ鐞嗭紝娣诲姞鍒颁綘闇€瑕佺殑鎸夐挳涓婂嵆鍙紝蹇潵鐪嬬湅浣犲緱鍒颁簡浠€涔堟牱鐨勭传鑹插惂锛佸搱鍝堬紝鍛抽亾鏄繖鏍风殑锛屼笉杩囪繕鏄璋冩暣涓€涓嬨€傛帴涓嬫潵锛屾牴鎹互涓嬫暟鎹粰閿洏鑳屾櫙涓婅壊锛岃鎸夐敭涓虹被鍚嶆寜閿彂鍏夈€傜户缁坊鍔犱互涓嬫牱寮忋€傝繖鏃跺€欏氨寰楀埌浜嗕笅闈㈢殑鏁堟灉锛屽揩鏉ョ湅鐪嬸煒侌煒侌煒佹槸涓嶆槸寰堥叿锛屾晥鏋滃嚭鏉ヤ簡锛屼笉杩囪繕宸渶鍚庝竴姝ワ紝缁欓敭鐩樺姞涓婂懠鍚哥伅锛岃繖閲屽彲浠ヤ娇鐢–SS3鍔ㄧ敾鏉ュ疄鐜板畠馃搶濂界殑锛佸ぇ鍔熷憡鎴愶紝鏈€鍚庝竴姝ュ畬鎴愶紝浣犱篃鎷ユ湁浜嗚嚜宸辩殑铏氭嫙娴佸厜閿洏锛屽搱鍝堭煓嗏€嶏笍锛岎煒婂ソ浜嗭紝浠ヤ笂灏辨槸鎴戠殑鍒嗕韩锛岋紝鎴戞槸娉曞尰锛屾湡寰呭ぇ瀹剁殑鐐硅禐馃憤杩樻湁鍏虫敞鉃曪紝褰撶劧涔熸杩庝綘鍔犲叆鍓嶇鐚庢墜鎶€鏈氦娴佺兢馃槢锛屽井淇￠椤靛姞鎴戯紝鎴戞媺浣犺繘缇わ紝浜ゆ祦鎶€鏈拰浠ｇ爜浠ュ鐨勪竴鍒囸煓嗏€嶏笍
