[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 asgrid-row-start: 2;*/}.grid-item:nth-of-type(6) {grid-column: 3 / span 2;/* the same asgrid-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>

轉載于:https://www.cnblogs.com/Answer1215/p/6624977.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/456168.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/456168.shtml
英文地址，請注明出處：http://en.pswp.cn/news/456168.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！