CSS Grid 筆記 03-CSS Grid Fundamentals

目標

此篇熟悉grid的布置與設定，與下一篇搭配 Firefox 開發工具觀測

Demo | Github

範例

.container{
    display: grid;
    /* grid-template-columns: 100px 500px 50px; */
    /* grid-template-columns: 100rem auto 200px 50px; */
    /*grid-template-columns: repeat(5, auto);*/
    grid-template-columns: 200px 500px;
    grid-template-rows: 200px 100px 400px;
    grid-gap: 20px;
}

筆記與備註事項

grid

The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration.

資料來源 - MDN

grid-template-columns

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
資料來源 - MDN

設定列的數目與寬度

grid-template-rows

The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.
資料來源 - MDN

設定行的高度，依序設定第 N 行的高度

gird-gap

The grid-gap CSS property is a shorthand property for grid-row-gap and grid-column-gap specifying the gutters between grid rows and columns.
資料來源 - MDN

設定行列之間的間距

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github