display:grid;
和display:inline-grid;
之间的区别是什么?
它们在此代码中都具有相同的效果。在这段代码中哪一个更好用?
<body>
<main>
<p>box1</p>
<p>box2</p>
<p>box3</p>
<p>box4</p>
</main>
</body>
* {
margin: 0px;
padding: 0px;
border: 0px;
box-sizing: border-box;
}
main {
display: grid; /* Not there */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px;
grid-gap: 20px;
}
p {
background-color: #eee;
/* In there */
display: grid; /* inline-grid */
place-items: center;
}