Ëæ×Å
Igalia ÔÚ Chromium/Blink ÒÔ¼° Safari/WebKitä¯ÀÀÆ÷ʵÏÖCSSÍø¸ñ²¼¾ÖµÄ²¿·Ö¹¤×÷µÄÍê³É£¬ÎÒÃÇÒѾʵÏÖÁ˶ÔÓÚ¶¨Î»Íø¸ñÏî(positioned
items)µÄÖ§³Ö¡£Êǵģ¬ÔÚÍø¸ñÖÐÖ§³Ö¾ø¶Ô¶¨Î»¡£
¿ÉÄÜÄãµÄµÚÒ»·´Ó¦ÊDz»Ï£ÍûÔÚÍø¸ñ²¼¾ÖÖÐʹÓö¨Î»µÄÍø¸ñÏµ«ÊÇ¿ÉÄÜÔÚijЩʹÓð¸ÀýÖбØÐëҪʹÓÃËüÃÇ¡£ÕâÆªÎÄÕÂÖ÷ÒªÓÃÀ´½âÊͶ¨Î»Íø¸ñÏîÔÚÍø¸ñÈÝÆ÷(grid
container)ÖеÄÌØÊâÐÔ¡£
ʵ¼ÊÉÏ£¬¶¨Î»Íø¸ñÏî¸úÆÕÍ¨Íø¸ñÏî(regular items)Ïà±È²¢Ã»ÓÐÄÇô´óµÄÇø±ð¡£µ±Íø¸ñÈÝÆ÷ÊǶ¨Î»ÏîµÄ°üº¬¿éʱ(ÀýÈ磬ÔÚÍø¸ñÈÝÆ÷ÖÐʹÓÃÏà¶Ô¶¨Î»
position: relative; )£¬ÕâЩ¶¨Î»Íø¸ñÏîÔÚÒ³ÃæµÄ²¼¾ÖÓëÆÕÍ¨Íø¸ñÏî»ù±¾ÊÇÏàͬµÄ¡£µ«ÊÇ£¬»¹ÊÇÓÐÉÙÐíµÄ²»Í¬£º
¶¨Î»Íø¸ñÏîĬÈϲ»ÄÜÑÓÉì(stretch)¡£
ËüÃDz»ÄÜʹÓÃÒþÊ½Íø¸ñ¡£ ËüÃDz»»á´´½¨Òþʽ¹ìµÀ¡£
ʹÓÃ×Ô¶¯²¼¾Ö¹¦ÄÜʱ£¬ËüÃDz»Õ¼Óõ¥Ôª¸ñ¡£
auto ÓëÍø¸ñÏß(grid lines)Ïà¹ØµÄʱºòÓÐÌØÊâµÄº¬Òå¡£
ÈÃÎÒÃÇÏêϸ½éÉÜÒ»ÏÂÕâЩ¹¦ÄÜ¡£
¶¨Î»Íø¸ñÏî»áÊÕËõµ½ÄÚÈݵĿí¸ß
ÎÒÃǶ¼ÖªµÀÆÕÍ¨Íø¸ñÏîĬÈÏ¿ÉÒÔÑÓÉìÀ´Ìî³äËüÃǵÄÇøÓò¡£È»¶ø£¬¶¨Î»Íø¸ñÏî²¢²»ÊÇÕâÑù£¬ÀàËÆÓÚ¶¨Î»µÄÆÕͨ¿é¼¶ÔªËØ£¬ËüÃÇ»áÊÕËõµ½ÄÚÈݵĿí¸ß¡£
ÕâµãºÜÈÝÒ×Àí½â£¬µ«ÊÇÒ»¸ö¼òµ¥µÄÀý×ÓÄÜÈÃËü¸ü¼ÓÇå³þÃ÷ÁË£º
<div style="display: grid; position: relative; grid-template-columns: 300px 200px; grid-template-rows: 200px 100px;"> <div style="grid-column: 1 / 3; grid-row: 1 / 3;"></div> <div style="position: absolute; grid-column: 1 / 3; grid-row: 1 / 3;"></div> </div> |
ÔÚÕâ¸öÀý×ÓÖУ¬ÎÒÃÇÓÐÒ»¸ö¼òµ¥µÄ 2x2 µÄÍø¸ñ¡£ÆÕÍ¨Íø¸ñÏîºÍ¶¨Î»Íø¸ñÏî¶¼ÉèÖÃÁËÕ¼ÂúÕû¸öÍø¸ñµÄCSS¹æÔò¡£ÕⶨÒåÁËÕâÐ©Íø¸ñÏîµÄ_ÇøÓò_°üÀ¨µÚÒ»Ðк͵ڶþÐÐÒÔ¼°µÚÒ»Áк͵ڶþÁС£

ÆÕÍ¨Íø¸ñÏîĬÈÏÔÚˮƽºÍ´¹Ö±·½Ïò¶¼»áÑÓÉ죬ËùÒÔËüÃÇ»áÕ¼¾ÝÕû¸öÍø¸ñÇøÓò¡£È»¶ø£¬¶¨Î»Íø¸ñÏî»á²úÉúËúÏÝ£¬ËüÃǵijߴç»á¸ù¾ÝÄÚÈÝÀ´ËõС¡£
ÔÚÏÂÃæµÄÀý×ÓÖУ¬ÎÒ»áºöÂÔÕâ¸ö²»Í¬µãÒÔ±ãÄÜչʾÿ¸ö¶¨Î»Íø¸ñÏîËùÕ¼¾ÝµÄÇøÓò¡£ÒªÊµÏÖ¸úͼƬһÑùµÄ½á¹û£¬ÄãÐèÒª½«¶¨Î»Íø¸ñÏîµÄ¿í¸ßÉèÖÃΪ
100% ¡£
¶¨Î»Íø¸ñÏîºÍÒþÊ½Íø¸ñ(implicit grid)
¶¨Î»Íø¸ñÏî²»²ÎÓëÍø¸ñµÄ²¼¾Ö£¬Ò²²»»áÓ°Ïìµ½ÆäËûÔªËØµÄ·ÅÖá£
Äã¿ÉÒÔÔÚÏÔÊ½Íø¸ñ(explicit grid)Íⲿ·ÅÖÃÒ»¸öÆÕÍ¨Íø¸ñÏî£¬Íø¸ñΪÁËÈÝÄÉÔªËØ»á´´½¨ÐèÒªµÄ¹ìµÀ¡£È»¶ø£¬¶ÔÓÚ¶¨Î»Íø¸ñÏîÀ´Ëµ£¬ÄãÉõÖÁÎÞ·¨²Î¿¼ÒþÊ½Íø¸ñµÄÍø¸ñÏߣ¬ËüÃǻᱻĬÈÏΪ¸ù¾Ý
auto ÊôÐÔÀ´·ÅÖá£ÕâÒâζ×ÅÄãÔÚÒþÊ½Íø¸ñÖв»ÄÜ·ÅÖö¨Î»ÔªËØ¡£ËüÃÇÓÉÓÚ²»²ÎÓëÍø¸ñµÄ²¼¾ÖËùÒÔÎÞ·¨´´½¨Òþʽ¹ìµÀ(implicit
tracks)¡£
ÈÃÎÒÃÇͨ¹ýÒ»¸öÀý×ÓÀ´¸üºÃµÄÀí½âÕâÒ»µã£º
<div style="display: grid; position: relative; grid-template-columns: 200px 100px; grid-template-rows: 100px 100px; grid-auto-columns: 100px; grid-auto-rows: 100px; width: 300px; height: 200px;"> <div style="position: absolute; grid-area: 4 / 4;"></div> </div> |
Õâ¸öÀý×ÓÖÐÎÒÃǶ¨ÒåÁËÒ»¸ö 2x2 µÄÍø¸ñ£¬µ«ÊǶ¨Î»Íø¸ñÏîÖ¸¶¨µÄÍø¸ñÇøÓòΪ grid-area: 4 /
4; ËùÒÔËü³¢ÊÔÈ¥ÕÒµÚËÄÐк͵ÚËÄÁС£È»¶ø¶¨Î»Íø¸ñÏî²»ÄÜ´´½¨Òþʽ¹ìµÀ¡£ËùÒÔ£¬ËüÏñ±»ÉèÖÃÁË auto Ò»Ñù½øÐзÅÖã¬ÔÚÕâ¸öÀý×ÓÖлáÕ¼¾ÝÕû¸öÏÔÊ½Íø¸ñ¡£auto
¶ÔÓÚ¾ø¶Ô¶¨Î»ÏîÓÐÌØÊâµÄº¬Ò壬ºóÃæÎÒÃÇ»á½øÐÐÏêϸ½âÊÍ¡£

¼ÙÉèÁíÍâÒ»¸öÆÕÍ¨Íø¸ñÏî´´½¨Òþʽ¹ìµÀµÄÀý×Ó£º
<div style="display: grid; position: relative; grid-template-columns: 200px 100px; grid-template-rows: 100px 100px; grid-auto-columns: 100px; grid-auto-rows: 100px; width: 500px; height: 400px;"> <div style="grid-area: 1 / 4;"></div> <div style="grid-area: 4 / 1;"></div> <div style="position: absolute; grid-area: 4 / 4;"></div> </div> |
ÔÚÕâ¸öÀý×ÓÖУ¬ÆÕÍ¨Íø¸ñÏî»á´´½¨Òþʽ¹ìµÀ£¬²úÉúÒ»¸ö 4x4 µÄÍø¸ñ¡£Õâʱºò¶¨Î»Íø¸ñÏî¾Í¿ÉÒÔ·ÅÖÃÔÚµÚËÄÐеÚËÄÁеÄλÖ㬼´±ãÕâЩÁÐÔÚÒþÊ½Íø¸ñÖС£

±¾ÎĵÄÕⲿ·ÖÒѾ±»Ð޸ĹýÁË£¬Ôڴ˸Ðл@fantasaiÖ¸³öÎҵĴíÎó¡£
¶¨Î»Íø¸ñÏîºÍ²¼¾ÖËã·¨
ÔÙÇ¿µ÷Ò»´Î£¬¶¨Î»Íø¸ñÏîÓÉÓÚ²»²ÎÓë²¼¾ÖËã·¨£¬ËùÒÔ²»»áÓ°ÏìÆäËûÔªËØµÄ²¼¾Ö¡£
ËùÒÔ£¬Èç¹ûÄãÓÐÒ»¸ö¶¨Î»Íø¸ñÏî²¢ÇÒ¶ÔһЩÆÕÍ¨Íø¸ñÏîʹÓÃÁË×Ô¶¯²¼¾Ö£¬ÄÇô¶¨Î»Íø¸ñÏî»á¸²¸ÇסÆÕÍ¨Íø¸ñÏî¡£ÕâЩ¶¨Î»Íø¸ñÏî
ÔÚ×Ô¶¯²¼¾Öʱ±»ÍêÈ«ºöÂÔÁË¡£
ÏÂÃæÊÇÒ»¸ö¼òµ¥µÄÀý×ÓÀ´½âÊÍÕâ¸öÐÐΪ£º
<div style="display: grid; position: relative; grid-template-columns: 300px 300px; grid-template-rows: 200px 200px;"> <div style="grid-column: auto; grid-row: auto;"></div> <div style="grid-column: auto; grid-row: auto;"></div> <div style="grid-column: auto; grid-row: auto;"></div> <div style="position: absolute; grid-column: 2 / 3; grid-row: 1 / 2;"></div> </div> |
ÕâÀïÎÒÃÇÓÖ´´½¨ÁËÒ»¸ö 2x2 µÄÍø¸ñ£¬ËüÓÐÈý¸ö×Ô¶¯·ÅÖÃµÄµÄÆÕÍ¨Íø¸ñÏîÒÔ¼°Ò»¸ö¾ø¶Ô¶¨Î»Íø¸ñÏî¡£Äã¿ÉÒÔ¿´µ½£¬Õâ¸ö¶¨Î»Íø¸ñÏî±»·ÅÖÃÔÚµÚÒ»ÐеڶþÁУ¬µ«ÊÇÔÚÕâ¸öµ¥Ôª¸ñÖж¨Î»Íø¸ñÏîµÄÏÂÃæ»¹ÓÐÒ»¸ö×Ô¶¯·ÅÖÃµÄÆÕÍ¨Íø¸ñÏî¡£Õâ˵Ã÷Íø¸ñÈÝÆ÷ÔÚ·ÅÖÃÆÕÍ¨Íø¸ñÏîµÄʱºò²¢²»»á¿¼ÂǶ¨Î»Íø¸ñÏ»áºöÂÔËü¡£

Èç¹ûËùÓеÄ×ÓÔªËØ¶¼Ã»ÓнøÐж¨Î»£¬×îºóÒ»¸öÔªËØ¾Í»áÔÚËüĬÈϵÄλÖÃ(µÚÒ»ÐеڶþÁÐ)£¬ÆäËû×Ô¶¯·ÅÖõÄÔªËØ»áÕ¼¾ÝÆäËûµ¥Ôª¸ñ£¬²»»á²úÉú¸²¸Ç¡£
¶¨Î»Íø¸ñÏîºÍ×Ô¶¯Íø¸ñÏß(auto lines)
Õâ¿ÉÄÜÊǶ¨Î»Íø¸ñÏî¸úÆÕÍ¨Íø¸ñÏîÏà±È×î´óµÄÇø±ð¡£Èç¹ûÄãûÓÐÖ¸¶¨Íø¸ñÏߣ¬ÄǻᱻÈÏΪÉèÖÃÁË auto Öµ£¬
µ«ÊÇ auto ²¢²»»áÏñÆÕÍ¨Íø¸ñÏîÒ»Ñù±»µ±×ö span 1 À´´¦Àí¡£¶ÔÓÚ¶¨Î»Íø¸ñÏîÀ´Ëµauto±»ÈÏΪÊÇÄڱ߾à(padding)µÄ±ßÔµ¡£
¹æ·¶½éÉÜÁËÍø¸ñÏß 0 ºÍ -0 µÄ¸ÅÄ¾¡¹ÜÌýÆðÀ´ÓÐµãÆæ¹Ö£¬µ«ÊÇËüÃÇȷʵÊǺÜÓÐÒâÒåµÄ¡£ auto Íø¸ñÏß»áÒýÓÃÃû³ÆÎª
0 ºÍ -0 µÄÍø¸ñÏߣ¬ËüÃÇ´ú±íÁËÍø¸ñÈÝÆ÷µÄÄڱ߾à±ßÔµ¡£
ÈÃÎÒÃÇÔÙÓü¸¸öÀý×ÓÀ´½âÊÍһϣº
<div style="display: grid; position: relative; grid-template-columns: 300px 200px; grid-template-rows: 200px 200px; padding: 50px 100px; width: 500px; height: 400px;"> <div style="position: absolute; grid-column: 1 / auto; grid-row: 2 / auto;"></div> </div> |
ÏÖÔÚÎÒÃÇÓÐÒ»¸ö 2x2 µÄÍø¸ñÈÝÆ÷£¬ËüÉèÖÃÁËÄڱ߾ࡣ¶¨Î»Íø¸ñÏ±»·ÅÖÃÔÚµÚ¶þÐеÚÒ»ÁУ¬ÓÉÓÚÉèÖÃÁË
auto ÊôÐÔ£¬ËüµÄÇøÓò»áÑÓÉìµ½Äڱ߾àµÄ±ßÔµ¡£

ÎÒÃÇÉõÖÁ¿ÉÒÔ½«¶¨Î»Íø¸ñÏî·ÅÖÃÔÚÄڱ߾àÀïÃæ¡£ÀýÈçʹÓà ¡°grid-column: auto / 1;¡±
£¬Íø¸ñÏî¾Í»á±»·ÅÖÃÔÚ×ó²àÄڱ߾àÖС£

µ±È»£¬Èç¹ûÍø¸ñÈÝÆ÷¸ü¿í£¬Content Box»¹ÓÐһЩ¿Õ°×ÇøÓò£¬ÄÇô¶¨Î»Íø¸ñÏîÒ²»áÕ¼¾ÝÄÇЩ¿Õ°×ÇøÓò¡£ÀýÈç:
<div style="display: grid; position: relative; grid-template-columns: 300px 200px; grid-template-rows: 200px 200px; padding: 50px 100px; width: 600px; height: 400px;"> <div style="position: absolute; grid-column: 3 / auto; grid-row: 2 / 3;"></div> </div> |
Õâ¸öÀý×ÓÖÐÍø¸ñµÄÁÐ×ܹ²¿í 500px£¬µ«ÊÇÍø¸ñÈÝÆ÷µÄ¿í¶ÈΪ 600px¡£ÕâÒâζ×ÅÔÚÍø¸ñÄÚÈÝÇøÓòÖÐÓÐ 100px
µÄ¿Õ°×ÇøÓò¡£´ÓÕâ¸öÀý×Ó¿ÉÒÔ¿´µ½£¬Õⲿ·ÖÇøÓòÔÚ¶¨Î»Íø¸ñÏîÑÓÉìµ½Äڱ߾à±ßÔµµÄʱºòÒ²»á±»Õ¼Óá£

Æ«ÒÆÁ¿(Offsets)
µ±È»£¬ÄãÒ²¿ÉÒÔʹÓÃÆ«ÒÆÁ¿À´·ÅÖö¨Î»Íø¸ñÏî(left, right, top ÒÔ¼° bottom ÊôÐÔ)¡£
¶¨Î»Íø¸ñÏî»á×ñÑÉÏÃæµÄ¹æÔò´´½¨Íø¸ñÇøÓò£¬ÕâÐ©Æ«ÒÆÁ¿»áÓ¦ÓÃÔÚÍø¸ñÇøÓòÄÚ²¿¡£
ÈÃÎÒÃÇÀ´¿´ÁíÒ»¸öÀý×Ó£º
<div style="display: grid; position: relative; grid-template-columns: 300px 200px; grid-template-rows: 200px 200px; padding: 50px 100px; width: 500px; height: 400px;"> <div style="position: absolute; grid-column: 1 / auto; grid-row: 2 / auto; left: 90px; right: 70px; top: 80px; bottom: 60px;"></div> </div> |
»¹ÊÇÒ»¸ö¾ßÓÐÄڱ߾àµÄ 2x2 µÄÍø¸ñÈÝÆ÷¡£¶¨Î»Íø¸ñÏîÔÚËüµÄÍø¸ñÇøÓòÖÐÓÐÒ»Ð©Æ«ÒÆ¡£

×ܽá
ÎÒ²»ÊǺÜÈ·¶¨¶ÔÓÚʹÓÃÍø¸ñ²¼¾ÖµÄWeb¿ª·¢ÕßÀ´Ëµ£¬Ö§³Ö¶¨Î»ÔªËØÓжàÖØÒª¡£Èç¹ûÄã·¢ÏÖijÖÖÇé¿öÏÂȷʵҪÓõ½ÕâЩµÄ»°£¬ÇëÒ»¶¨Òª¸æËßÎÒ¡£ÎÒÏ£ÍûÕâÆªÎÄÕÂÄܰïÖúÄã¸üºÃµØÀí½âËü£¬Í¬Ê±×¢Òâµ½ÏÖʵÉú»îÖпÉÄÜ»áÓõ½ËüÃǵij¡¾°¡£
ºÃÏûÏ¢ÊÇ ÄãÒѾ¿ÉÒÔÔÚ´ó¶àÊýÖ÷Á÷ä¯ÀÀÆ÷µÄ×î½ü¼¸¸ö°æ±¾ÖвâÊÔÒÔÉÏÄÚÈÝÁË£ºChrome Canary, Safari
Technology Preview ÒÔ¼° Firefox¡£ÎÒÃÇÏ£ÍûÕâÈý¸öä¯ÀÀÆ÷µÄʵÏÖ¶¼ÊǿɲÙ×÷µÄ£¬µ«ÊÇÈç¹ûÄã·¢ÏÖʲôÎÊÌâÒ»¶¨Òª¸æËßÎÒÃÇ¡£
»¹ÓÐÒ»¼þÊÂÇ飺¶¨Î»Íø¸ñÏî¶ÔÓÚ'¶ÔÆë'µÄÖ§³Ö¡£ÕâÒ»µãÔÚËùÓÐä¯ÀÀÆ÷¶¼»¹Ã»Óб»Ö§³Ö£¬µ«ÊÇÕâÖÖÐÐΪ¸úÄãʹÓÃµÄÆÕÍ¨Íø¸ñÏîÊǺÜÏàËÆµÄ¡£ÎÒÃǽ«»áÔÚ½ñºóµÄ¼¸¸öÔÂÀïʵÏÖËü£¬ÕâÊǺÜÓÐÏ£ÍûµÄ¡£
×îºó£¬¸ÐлBloomberg¶ÔÓÚʵÏÖÔÚBlink ºÍ WebKitÉÏÖ§³ÖCSSÍø¸ñ²¼¾ÖËù×öµÄ¹±Ïס£ |