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.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css-place-grid-items-on-a-grid-using-grid-column-and-grid-row</title>
  6.     <style>
  7.         .grid-item {
  8.             background-color: cadetblue;
  9.         }
  10.  
  11.         .container {
  12.             display: grid;
  13.             grid-gap: 15px;
  14.             height: 100vh;
  15.             grid-template-columns: 100px 200px auto auto;
  16.         }
  17.  
  18.         .grid-item:nth-of-type(2) {
  19.             grid-row: span 2;
  20.             /* the same as
  21.             grid-row-start: 2;
  22.             */
  23.         }
  24.  
  25.         .grid-item:nth-of-type(6) {
  26.             grid-column: 3 / span 2;
  27.             /* the same as
  28.             grid-column-start: 3;
  29.             grid-column-end 5
  30.             */
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <div class="container">
  36.     <div class="grid-item">1</div>
  37.     <div class="grid-item">2</div>
  38.     <div class="grid-item">3</div>
  39.     <div class="grid-item">4</div>
  40.     <div class="grid-item">5</div>
  41.     <div class="grid-item">6</div>
  42. </div>
  43. </body>
  44. </html>

[Grid Layout] Place grid items on a grid using grid-column and grid-row的更多相关文章

  1. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  2. CSS3 & Grid Layout All In One

    CSS3 & Grid Layout All In One W3C https://www.w3.org/TR/css-grid-1/ Grid Layout is a new layout ...

  3. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  4. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  5. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

  6. CSS3 GRID LAYOUT

    CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/

  7. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  8. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  9. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  10. flexbox与grid layout的区别

    flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,

随机推荐

  1. Spring源码分析专题 —— IOC容器启动过程（上篇）

    声明 1.建议先阅读<Spring源码分析专题 -- 阅读指引> 2.强烈建议阅读过程中要参照调用过程图,每篇都有其对应的调用过程图 3.写文不易,转载请标明出处 前言 关于 IOC 容器 ...

  2. Win8.1系统所有的路径都无法更改文件夹名称

    平台:win8.1 问题:所有的路径,无论是桌面还是分区还是文件夹内,可以新建和删除文件夹,但不能给文件夹改名,提示“文件或文件夹不存在 ” 分析:安装了几次photoshop后莫名其妙出现这个问题, ...

  3. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 使用Spring框架的好处

    转自:https://www.cnblogs.com/hoobey/p/6032506.html 在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为它将JD ...

  5. 分析器错误消息: 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分

    关于错误提示:此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决方案 不知怎么的,每次Win10升级后相应的注册器都恢复默认了,当我运行08版的asp项目时会报这个错. vs上的 ...

  6. serialport串口通讯

    在.NET Framework 2.0中提供了SerialPort类,该类主要实现串口数据通信 = System.IO.Ports.SerialPort.GetPortNames();获取电脑有哪几个 ...

  7. 全然用linux工作，放弃windows

    按: 虽然我们已经不习惯看长篇大论, 但我还是要说, 这是一篇值得你从头读到尾的长篇文章. 2005年9月22日,清华在读博士生王垠在水木社区BLOG上发表了<清华梦的粉碎--写给清华大学的退学 ...

  8. 中英文对照 —— 标点符号（punctuation）

    有限的几个: What Are the Fourteen Punctuation Marks in English Grammar? period:句号:comma:逗号:冒号:colon:分号:se ...

  9. 12.SpringBoot+MyBatis(XML)+Druid

    转自:https://www.cnblogs.com/MaxElephant/p/8108342.html 主要是在Spring Boot中集成MyBatis,可以选用基于注解的方式,也可以选择xml ...

  10. Javascript和jquery事件--鼠标事件的小结

    1.鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout. <1>其中mouseup和mous ...