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>
![[已授权] 互联网定位技术小谈](http://pic.xiahunao.cn/[已授权] 互联网定位技术小谈)
