zoukankan html css js c++ java

[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>

查看全文

相关阅读:
第03组 Alpha冲刺 (4/6)
第03组 Alpha冲刺 (3/6)
第03组 Alpha冲刺 (2/6)
第03组 Alpha冲刺 (1/6)
第03组(63) 需求分析报告
 第3组(63) 团队展示
 结对编程作业
 第03组 Alpha冲刺总结
 第03组 Alpha冲刺 (6/6)
第03组 Alpha冲刺 (5/6)

原文地址：https://www.cnblogs.com/Answer1215/p/6624977.html