ç½æ ¼åå
å¨ CSS ç½æ ¼å¸å±ä¸ï¼ç½æ ¼åå ï¼grid cellï¼æ¯ CSS ç½æ ¼ä¸çæå°åå ã宿¯åæ¡ç½æ ¼çº¿ä¹é´ç空é´ï¼æ¦å¿µä¸é常åè¡¨æ ¼åå æ ¼ã

妿ä¸ä½¿ç¨ç½æ ¼å¸å±æä¾çæ¹æ³å»æ¾ç½®ç½æ ¼å®¹å¨ç项ç®ï¼è¿äºé¡¹ç®å°éè¿èªå¨å¸å±ç®æ³è¢«æ¾ç½®å°æ¯ä¸ªç½æ ¼åå æ ¼ä¸ãå°å建é¢å¤çè¡æå轨é以å建足å¤çåå æ ¼æ¥ä¿åææé¡¹ç®ã
å¨ä¾åä¸ï¼æä»¬å建äºä¸ä¸ªä¸å轨éçç½æ ¼ãäºä¸ªé¡¹ç®è¢«æ¾ç½®å°ç½æ ¼åå æ ¼ä¸ï¼å®ä»¬æ²¿çåå§è¡ä¾æ¬¡è¢«æ¾ç½®å°ä¸ä¸ªç½æ ¼åå æ ¼ä¸ï¼ç¶å为å©ä¸ç两个å建äºä¸ä¸ªæ°è¡ã
示ä¾
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
åè§
>屿§åè
æ©å±é 读
- CSS ç½æ ¼å¸å±æåï¼ç½æ ¼å¸å±çåºæ¬æ¦å¿µ
- CSS ç½æ ¼å¸å±è§èä¸ç½æ ¼åå æ ¼çå®ä¹