Why don't background colors work in inline-grids

  • A+
Category:Languages

I created two divs; one with a display:inline-grid property and another with display:grid property. I want to apply a background color to the child elements of both divs but the div with the display:inline-grid property is not coloring its elements.

HTML and CSS code

#inline {   display: inline-grid; }  #block {   display: grid; }  div div {   height: 50px; }  div div:nth-child(1n) {   background-color: green; }  div div:nth-child(2n) {   background-color: rebeccapurple; }  div div:nth-child(3n) {   background-color: aquamarine; }
<body>   <div id="inline">     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>   </div>   <div id="block">     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>   </div> </body>

The output is: Why don't background colors work in inline-grids

How can I color the divs inside the inline-grid div?

 


Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline {   display: inline-grid;   width: 150px; }  #block {   display: grid; }  div div {   height: 50px; }  div div:nth-child(1n) {   background-color: green; }  div div:nth-child(2n) {   background-color: rebeccapurple; }  div div:nth-child(3n) {   background-color: aquamarine; }
<body>   <div id="inline">     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>   </div>   <div id="block">     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>   </div> </body>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: