CSS grid layout demo 網格佈局實例

時間 2020-06-18

標籤 css grid layout demo 網格佈局實例欄目 CSS 简体版

原文原文鏈接

直接上代碼，裏面我加註釋，至關的簡單, 也能夠去個人github上直接下載代碼，順手給個星：https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.htmlhtml

<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta content=yes name=apple-mobile-web-app-capable>
<meta content=yes name=apple-touch-fullscreen>
<meta content="telephone=no,email=no" name=format-detection>

<head>
    <title>Gird示例</title>
    <style> body, html { padding: 0; margin: 0;
        } .wrapper { display: grid; grid-template-columns: 1fr 1fr;
            /*表示2列*/ grid-template-rows: 1fr 2fr 1fr 2fr;
            /*第二行的高是第一行的2倍,咱們如今能夠設置行高之間的關係。若是咱們把前面的行高設成 1fr ，最後一個則設置爲 3fr，這意味着第二行的行高是第一行的 3 倍：*/ grid-column-gap: 1px;
            /*列之間的線*/ grid-row-gap: 1px;
            /*行之間的線隔*/ background-color: rgb(117, 112, 112);
        } @media screen and (min-width: 500px) {
            /*超過500顯示三列*/ .wrapper { grid-template-columns: 1fr 1fr 1fr;
            } } @media screen and (min-width: 800px) {
            /*超過800四列*/ .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr;
            } } .letter { background-color: #0069b3; display: flex; justify-content: center;
            /*flex的相差屬性居中對齊*/ align-items: center;
            /*容器裏元素垂直居中*/ padding: 20px; font-size: 70px; color: white; line-height: 1; font-family: 'hobeaux-rococeaux-background', Helvetica; font-weight: 200; cursor: pointer; transition: all .3s ease;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="letter"> Aa </div>

        <div class="letter"> Bb </div>

        <div class='letter'> Cc </div>
        <div class='letter'> Dd </div>
        <div class="letter"> Ee </div>

        <div class="letter"> Ff </div>

        <div class='letter'> Gg </div>
        <div class='letter'> Hh </div>
        <div class="letter"> Ii </div>

        <div class="letter"> Jj </div>

        <div class='letter'> Kk </div>
        <div class='letter'> Mm </div>

    </div>
</body>

</html>