W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #container { width: 60%; aspect-ratio: 3/2; border: solid black 1px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: start; } #container > div { width: 60%; aspect-ratio: 2; background-color: coral; } </style> </head> <body> <h1>place-items 属性</h1> <p>为 place-items 属性设置的值 'start' 等同于同时为 align-items 和 justify-items 属性设置 'start'。这意味着每个网格项目都放置在其网格单元格的起始位置，即在块方向的起始位置和行方向的起始位置。</p> <div id="container"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>