用 css 製作九宮格 - css grid layout
在寫ooxx的時候，最重要的(?)第一步當然就是要有背景
看起來很像<table>，雖然也真的可以使用 <table> 來排，不過其實有很多麻煩的地方，而且不太推薦。
所以就來介紹這次的主角 ~ css grid layout ~
一切都從這裡開始
這HTML是不是很乾淨啊❤️而透過 display:grid ，我們就能讓瀏覽器把裡面的元素排成格子狀
使用grid，還可以享有內建的平分方式，再也不用設定 width:33% 了(還要記得去掉margin的寬度，不然就...)。
而這時候應該就會得到這樣子的九宮格了
恩？你說你的不是正方形？只要把它弄成正方形就好啦，再加上一些個人喜歡的效果
這樣應該就會看起來像是一開始的圖了
這樣是不是很方便呢？下次要做類似的事時不要忘了 grid layout 喔。
就是長這樣
看起來很像<table>，雖然也真的可以使用 <table> 來排，不過其實有很多麻煩的地方，而且不太推薦。
所以就來介紹這次的主角 ~ css grid layout ~
一切都從這裡開始
這HTML是不是很乾淨啊❤️而透過 display:grid ，我們就能讓瀏覽器把裡面的元素排成格子狀
使用grid，還可以享有內建的平分方式，再也不用設定 width:33% 了(還要記得去掉margin的寬度，不然就...)。
而這時候應該就會得到這樣子的九宮格了
這樣應該就會看起來像是一開始的圖了
這樣是不是很方便呢？下次要做類似的事時不要忘了 grid layout 喔。
留言
張貼留言