display:grid;和 和有display:inline-grid;什么区别?
它们在此代码中具有相同的效果。在这段代码中,哪个更好用?
<body>
<main>
<p>box1</p>
<p>box2</p>
<p>box3</p>
<p>box4</p>
</main>
</body>
Run Code Online (Sandbox Code Playgroud)
* {
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;
}
Run Code Online (Sandbox Code Playgroud)