渚濈█璁板緱鏌愬勾绮よ楂樿€冧綔鏂囩殑鐩稿叧鎻忚堪鈥斺€斺€滄湁鏃跺€欙紝甯歌瘑瀹规槗鐭ヨ闅撅紝鏈夋椂鍊欏父璇嗗繀椤昏鍒嗚В浠ヤ骇鐢熸柊鐨勩€傗€濅汉浠殑鎯宠薄鍔涘拰鍒涢€犲姏寰堝鏄撹甯歌瘑鐨勪竴鑷磋鐭ユ墍鍓婂急銆侰SS鏇存柊澶揩锛屽彧鑳戒笉鏂潱淇冭嚜宸辩户缁涔狅紝涓€鐩村憜鍦ㄨ垝閫傚尯锛屽緢瀹规槗璺熶笉涓婅妭濂忋€傚綋鐒讹紝杩欏彞璇濆彲浠ラ€傜敤浜庝换浣曟妧鏈拰浠讳綍琛屼笟锛岃€屼笉浠呬粎鏄疌SS銆傚洖鍒版湰鏂囩殑涓婚鈥斺€旀柊鏃朵唬甯冨眬銆傚埄鐢ㄧ幇鏈夌殑CSS鎶€鏈紝鏄惁鍙互澶ц儐鍦拌烦鍑哄父瑙勬€濈淮锛屼笉鍐嶅眬闄愪簬涓€涓帴涓€涓殑鐭╁舰妗嗭紝灏濊瘯鏇村叿鏈夎壓鏈劅锛熷氨鍍忎笅闈㈣繖浜涖€備笉鎷樹竴鏍肩殑绾挎潯锛氭枃瀛楁部鐫€鐢婚潰杈圭紭鎺掑垪锛氫笉鍐嶆槸妯珫锛氳繕鏄€紓鐨勭綉鏍硷細鏄笉鏄緢鏈夎叮锛熶笉鎷樹竴鏍肩殑甯冨眬鍙互鍚稿紩鏇村鐨勬敞鎰忓姏鍜岄〉闈㈡祦閲忋€傚綋鐒讹紝杩欎篃闇€瑕佹垜瀵笴SS鏈夎冻澶熺殑鎺屾彙锛屾墠鑳藉湪鏈夐檺鐨勫睘鎬т腑鍒涢€犲嚭鏇村涓嶅悓鐨勫彲鑳芥€с€傜綉鏍煎竷灞€璇村埌鏂版椂浠ｅ竷灞€鍜屽垱鎰忓竷灞€锛屽氨涓嶅緱涓嶆彁鍒扮綉鏍煎竷灞€銆侰SSGrid甯冨眬鐨勪簩缁存€т娇寰楁垜浠椤甸潰鐨勬帶鍒惰兘鍔涙瘮浼犵粺鐨勬诞鍔ㄥ竷灞€銆佸畾浣嶅竷灞€銆乫lex甯冨眬鏇村己銆備娇鐢℅rid甯冨眬灏嗛〉闈㈠垏鍧楄繖閲岋紝鎴戜滑鍒╃敤Grid甯冨眬鐨勭壒鐐癸紝灏嗛〉闈换鎰忓垏涓烘垜浠兂瑕佺殑涓嶅悓鍧楀尯鍩熴€傝繖閲屾帹鑽愪竴浜涘彲浠ユ柟渚挎垜浠珿rid甯冨眬鐨勫伐鍏凤細QuickGridLayout-GridLayout瀹冧娇鐢ㄨ繖涓伐鍏峰彲浠ュ揩閫熷垱寤轰綘鎯宠鐨凣rid甯冨眬骞跺緱鍒板搴旂殑CSS锛岄潪甯哥畝鍗曟柟渚裤€傝繖閲屾垜鐢ㄥ伐鍏锋妸椤甸潰鍒嗘垚A銆丅銆丆銆丏銆丒銆丗6涓尯鍩燂細澶嶅埗鍙宠竟鐨凥TML鍜孋SS锛屽揩閫熷緱鍒拌繖鏍风殑甯冨眬銆傛垜鎶婁唬鐮佸鍒跺埌CodePen涓紝绠€鍗曠殑娣诲姞浜嗘鏌ヨ儗鏅鑹插悗锛屾垜浠彲浠ュ熀浜庤繖涓竷灞€鍋氫换浣曚簨锛歝lip-path瀹炵幇GTA5灏侀潰锛屽氨鍍忔槸杩欐牱鐨勶細鎴戜滑灏嗕竴涓?x4鐨凣rid缃戞牸鍒嗘垚9涓笉鍚岀殑閮ㄥ垎锛氱劧鍚庝娇鐢╟lip-path锛屾牴鎹皝闈㈠浘鐗囩殑褰㈢姸锛屽姣忎釜缃戞牸椤硅繘琛屼簩娆¤鍓細ok锛屽拰鏈€鍚庢妸閲岄潰鐨勯鑹叉崲鎴愬叿浣撶殑鍥剧墖鍧楀嵆鍙細CodePenDemo--GTA5poster(GridandClipPath)褰撶劧杩欓噷鏈変釜slot锛屾渶鍚庣敤浜?寮犲浘鐗囷紝浣曚箰鑰屼笉涓哄憿鐩存帴涓婂浘锛?)Grid鏄鏉傚竷灞€杩囩▼涓潪甯稿ソ鐨勫府鎵嬨€傞潪甯搁€傚悎鍚勭涓嶈鍒欑綉鏍煎潡鐨勫竷灞€銆傝繖閲岃繕鏈変竴涓狣EMO锛氫綔鑰呮槸OliviaNg锛孌emo鐨勯摼鎺モ€斺€擟odePenDemo鈥斺€擟SSGrid:TrainTicketwaterfalllayoutWaterfalllayout鍦ㄧ幇浠ｅ竷灞€涓篃寰堝父瑙侊紝閫氬父鐢ㄤ簬涓€浜涚収鐗囧銆傚儚杩欐牱锛氫箣鍓嶏紝鍦ㄦ病鏈塉avaScript鐨勬儏鍐典笅锛屾垜浠湁3绉嶇函CSS鏂瑰紡瀹炵幇浼€戝竷娴佸竷灞€锛堟敞鎰忥紝杩欓噷鏄吉鐎戝竷娴侊級锛屽垎鍒槸锛氫娇鐢–SScolumn瀹炵幇鐎戝竷娴佸竷灞€浣跨敤CSSflex瀹炵幇鐎戝竷娴乴ayout浣跨敤CSSgrid瀹炵幇鐎戝竷娴佸竷灞€銆傚彲浠ョ偣寮€demo鐪嬬湅锛屼互涓婁笁绉嶆柟寮忓疄鐜扮殑鐎戝竷娴佸竷灞€閮芥湁鏄庢樉鐨勭己鐐癸細瀵逛簬flex鍜宑olumn甯冨眬锛屽彧鑳藉疄鐜板瀭鐩寸€戝竷娴併€傚竷灞€锛岀涓€鍒楀～鍏呯浜屽垪锛屼緷姝ょ被鎺ㄣ€傚浜嶨rid甯冨眬锛岀己鐐规槸涓嶈兘鑷姩閫傞厤涓嶅悓楂樺害锛岄渶瑕佹墜鍔ㄦ寚瀹氭瘡涓厓绱犵殑鍧楀ぇ灏忋€備互鍚庯紝鏍囧噯浼氬熀浜嶨rid甯冨眬瀹炵幇grid-template-rows:masonry锛屼娇鐢ㄨ繖涓爣鍑嗭紝鎴戜滑鍙互蹇€熺殑浣跨敤Grid瀹炵幇姘村钩鐎戝竷寮忓竷灞€銆傜洰鍓嶏紝鎮ㄥ彲浠ュ湪Firefox涓綋楠岃鍔熻兘銆備娇鐢╣rid-template-rows:masonry瀹炵幇姘村钩鎺掑垪鐨勭€戝竷甯冨眬銆俫rid-template-rows锛歮asonry鏄痜irefox浠嶧irefox87寮€濮嬫敮鎸佺殑涓€绉嶅熀浜巊rid甯冨眬蹇€熷垱寤虹€戝竷甯冨眬鐨勬柟娉曘€傚苟涓攆irefox涓€鐩村湪灏嗚繖涓睘鎬ф帹鍏ユ爣鍑嗐€備粠firefox87寮€濮嬶紝鍦ㄦ祻瑙堝櫒鐨刄RL杈撳叆鏍忚緭鍏bout:config锛屽紑鍚痩ayout.css.grid-template-masonry-value.enabled閰嶇疆銆傛槸鍚﹀彲浠ヤ娇鐢?-grid-template-rows:masonry閫氬父鎯呭喌涓嬶紝鎴戜滑杩樻槸闇€瑕佽姳璐逛竴瀹氱殑鍔姏鏉ュ疄鐜扮€戝竷娴佸竷灞€锛屽嵆浣挎槸鍩轰簬缃戞牸甯冨眬銆備互寰€閫氳繃缃戞牸甯冨眬锛屾垜浠彲浠ラ€氳繃绮剧粏鎺у埗姣忎釜缃戞牸椤规潵瀹炵幇鍨傜洿鐎戝竷娴佸竷灞€锛?divclass="g-container">
