display:grid和display:inline-grid有什么区别?

时间:2018-06-14 07:53:13

标签: css css3 css-grid

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;
}

0 个答案:

没有答案