Menu
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:
How can I color the divs inside the inline-grid div?
205
asked Aug 11 '18 07:08
In Edit mode, tap on the grid icon next to the settings cog and select Grid Background. Here you can choose a colour or picture for the background of your grid set. You can change the background of all the grids in your grid set by selecting Apply to all grids.
Using display: inline-grid creates an inline-level box for the container, but block boxes for its children. By themselves, display: grid and display: inline-grid won't automatically arrange these boxes into rows and columns. We also need to tell the browser where and how to place things.
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>This happens because display: inline-grid; is a inline elements
Basically, an inline element does not cause a line break (start on a new line) and does not take up the full width of a page, only the space bounded by its opening and closing tag. It is usually used within other HTML elements.
if you want you can colour it by using some additional styles for sample width:100%; in your case:
#inline {
display: inline-grid;
width:100%;
}
#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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
