[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 @   Zhentiw  阅读(185)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2016-03-27 [Angular 2] implements OnInit, OnDestory for fetching data from server
点击右上角即可分享
微信分享提示
AI IDE Trae