如果您想要將一個框分成四部分,并在這四個部分中間添加一些間距,請使用以下 CSS 代碼。
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
上面的代碼設置了一個網格容器,它將屏幕分成四等份,每份的寬度為1fr。這意味著每個部分都將占用相等的空間。此外,它還添加了10px的間距。
如果您希望每個部分的大小不相同,您可以像下面這樣調整代碼:
.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 10px; }
上面的代碼將第二個部分的寬度設置為其他部分的兩倍。這將導致第二個部分占用更多的空間。
使用這些代碼可以讓您更輕松地實現復雜的布局并創建出令人愉悅的網頁設計。盡情發揮您的創造力,嘗試在網格容器中添加更多的元素和樣式。通過使用 CSS 網格布局,您可以使代碼更加容易維護,并大大提高您的網頁效果。