[Grid Layout] Place grid items on a grid using grid-column and grid-row

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-place-grid-items-on-a-grid-using-grid-column-and-grid-row</title>
    <style>
        .grid-item {
            background-color: cadetblue;
        }

        .container {
            display: grid;
            grid-gap: 15px;
            height: 100vh;
            grid-template-columns: 100px 200px auto auto;
        }

        .grid-item:nth-of-type(2) {
            grid-row: span 2;
            /* the same as
            grid-row-start: 2;
            */
        }

        .grid-item:nth-of-type(6) {
            grid-column: 3 / span 2;
            /* the same as
            grid-column-start: 3;
            grid-column-end 5
            */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>
</body>
</html>

 

 

posted @ 2017-03-27 04:34  Zhentiw  阅读(185)  评论(0)  编辑  收藏  举报