15

What is the difference between display:grid; and display:inline-grid;?

They both have the same effect in this code. Which one is better to use, in this code?

<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;
}
black
  • 703
  • 2
  • 7
  • 16
  • 1
    unable to fins the duplicated question, unable to provide an answer, I'll just post here the link that gives the answer https://css-tricks.com/snippets/css/complete-guide-grid/ and https://medium.com/@DaphneWatson/css-display-properties-block-inline-and-inline-block-how-to-tell-the-difference-7d3a1e6e3051 – GWorking Nov 10 '18 at 11:17
  • 2
    The alternate link is not truely answer to this question. – Ashutosh Nigam Mar 15 '20 at 13:24
  • 3
    ^^^ that css-tricks article is the reason I am reading this page... – scatter May 06 '20 at 21:14
  • I came here from css-tricks. Visit https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named & change display: grid; of grid-container class to display: inline-grid; , You will get the difference. – Vikram Sapate May 05 '21 at 11:29

0 Answers0