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?
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>
Just add a "width" attribute to your division:
#inline {
display: inline-grid;
width: 100%;
}
I have just added width property to the #inline css and this is now working.
#inline {
display: inline-grid;
width: 100%;
}
You must know why you should use any display type and when to use it, this is the best way to have the result you need
CSS Grid Layout Module
.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
text-align: center;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
}
<div class="grid-container" style="grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';">
<div class="grid-item" style="grid-area: header">
<h3>Header</h3>
</div>
<div class="grid-item" style="grid-area: menu">
<h3>Menu</h3>
</div>
<div class="grid-item" style="grid-area: main">
<h3>Main</h3>
</div>
<div class="grid-item" style="grid-area: right">
<h3>Right</h3>
</div>
<div class="grid-item" style="grid-area: footer">
<h3>Footer</h3>
</div>
</div>
Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.
More info ->
Related
I'm trying to loop an array of objects and display them in grid view but with the flexbox concept in CSS.
<div class="container">
<div class="innercontainer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4 (to go to row 2 if there is 4)</div>
</div>
</div>
.container {
width: 100%;
background-color: red;
}
.innercontainer {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.item {
flex: 1;
background-color: yellow;
padding: 30px;
}
The above code works perfectly fine until 3 items. When 4th item comes, I want it to go to the next row.
I tried some research and did this but not working.
<div class="container">
<div class="innercontainer">
<div class="item">1</div>
<div class="breaker"></div>
<div class="item">2</div>
<div class="breaker"></div>
<div class="item">3</div>
<div class="breaker"></div>
<div class="item">4 (to go to row 2 if there is 4)</div>
<div class="breaker"></div>
</div>
</div>
I appended this css code to above css, but not working.
.breaker {
display: none;
}
.breaker:nth-child(3n) {
display: block;
width: 100%;
height: 0;
}
You can see them in codepen. (https://codepen.io/apple-hhh/pen/bGMMByr)
What I want is:
With my first implementation, I have achieved the first 2 scenarios from the picture.
Use CSS grid for this:
.container {
display: grid;
grid-auto-flow: column;
gap: 5px;
border: 1px solid;
margin: 20px 0;
}
.container > div:nth-child(3n + 1) {grid-column: 1}
.container > div:nth-child(3n + 2) {grid-column: 2}
.container > div:nth-child(3n + 3) {grid-column: 3}
.container > div {
height: 50px;
background: red;
}
<div class="container">
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Try adding flex-basis: 25%; to your .item class. Usually, 33% would work but since you have padding in the item class, you might have to play around with it a bit.
flex-basis: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
In my experience using grid instead of flex is better here.
.item{
background-color: yellow;
width: 33%;
flex-grow: 1;
}
This question already has answers here:
How to select a range of elements in repeated pattern
(2 answers)
Closed 1 year ago.
I have a list of elements I want to style 2 and 3 per row alternatively. Ideally I want a CSS solution.
Regardless of using float, flex, or grid, there is still the issue of the CSS selector.
I was initially thinking of using something like :nth-child(n+3) and :nth-child(n+2) but that made no sense.
This is the style I'm using right now, but I'm looking for a more dynamic solution.
.parent {
display: flex;
flex-wrap: wrap;
}
.element {
display: flex;
justify-content: center;
margin-bottom: 50px;
width: 50px;
height: 50px;
}
.element > div {
background-color: black;
width: 100px;
}
.element:nth-child(1),
.element:nth-child(2) {
width: 50%;
}
.element:nth-child(3),
.element:nth-child(4),
.element:nth-child(5) {
width: 33%;
}
.element:nth-child(6),
.element:nth-child(7) {
width: 50%;
}
<div class="parent">
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
</div>
Here's a fiddle, this might be what you're looking for
https://jsfiddle.net/xch0m5zy/
.box:nth-child(-n+3) {
background-color: blue;
}
.box:nth-child(n+4) {
background-color: red;
}
.box:nth-child(n+7) {
background-color: green;
}
How should I edit the CSS and/or HTML so that these squares fit to a particular maximum width, while maintaining the 4x4 square structure? Right now, it resizes to the width of the browser window, but if the browser is stretched out across the screen, the squares are far too large and the height goes well beyond the height of my screen.
I've tried adding a container div and adding a max-width, but that does not seem to relate to the width of 4 squares next to each other, and changes the width of each square without adjusting the height evenly.
.w {
overflow: hidden;
}
section {
margin: -1%;
padding: 20px;
}
section div {
background: #CCC;
float: left;
height: 24vw;
margin: 1%;
width: 23%;
color:white;
}
<div id="playGrid" class="w">
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
How about, you know, CSS grid? You can use the width and height to adjust the whole shebang's size.
#playGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 15px;
align-content: stretch;
width: 50vw;
height: 50vw;
}
#playGrid div {
background: #CCC;
color: white;
}
<div id="playGrid" class="w">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</div>
You can leverage CSS Grid Layout to define your grid, and then bound the height and width of the section to 100vh:
#playGridSection {
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(4, 25%);
height: 100vh;
width: 100vh;
margin-right: auto;
margin-left: auto;
}
section div {
background: #CCC;
color:white;
align-self: stretch;
justify-self: stretch;
margin: 1vh;
}
<div id="playGrid">
<section id="playGridSection">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
You may relay on flex and a pseudo to stretch your element to a square boxe.
Here is a basic example. (You should also clarify what kind of content should be standing inside and which kind of layout you need, so we can tune/update HTML(the content to put inside) & CSS according to your real expected result, it could be like a sudoku grid ? Responsive grid of squares within a responsive grid of squares )
body {margin:0;}
.w {}
section {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding: 20px;
max-width: 100vmin;
margin: auto;
}
section div {
background: #CCC;
min-width: 21%;
/* cannot be more than 4 on a row */
flex-grow: 1;
/* stretch their width evenly */
margin: 1vmin;
}
section div:before {
/* note, you need to stretch only one per row and
the selector can be also : section div:nth-child(4n):before */
content: '';
padding-top: 100%;
/* stretch height using width as a reference (padding/margin units in % ) */
float: left;
/* let it on the side to add content .. aside */
}
<div id="playGrid" class="w">
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
My style is:
.Content > div {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 33%;
height: 100%;
white-space: nowrap;
overflow: hidden;
}
I want only first children of .Content being "no wrappable". But all divs inside first children becomes "no wrappable". This is not what I need. Is there a way to solve this problem?
Edit
My html is:
<div class="Content">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="center1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="center2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
So, I want only .left, .center1, .center2, .right divs being "no wrappable" inside .Content div.
If I understand your question correctly, you want the children of the .Content's children to not have the white-space: nowrap; property.
You can do this by using this css:
.Content > div > div {
white-space: normal;
}
Let's say that I have the following code:
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
How would I go about selecting each instance inside of the "container" using CSS without naming it as a class or id or even using style="" on the element itself?
Thanks in advance!
Solution 1 : Immediate child selector
You will have to use the CSS selector >. This will target all the immediate child elements
Example :
.className > element {
}
See this below:
.container > div {
height: 40px;
width: 100%;
background-color: orange;
margin:10px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Solution 2 : Nested children selector
You can also use it as follows:
.className element {
}
See this below :
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
This is slightly different from the previous selector. The difference is that this will select all divs (including the nested children) within the immediate divs. To understand its effect, see below :
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
<div class="container">
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Solution 3 : Specific child selector (nth-child)
In case you want to select only a specific/specific set of immediate children, you can use the nth-child selector as follows:
.className > element:nth-child(n) {
}
See this below
.container > div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
.container > div:nth-child(3n+1) {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Solution 4 : Nested Specific child selector (nth-child)
Lastly, you can combine the aforementioned selectors to target specific children and children of children as well as follows :
.className > element:nth-child(n) {
}
See this below:
.container div {
background-color: orange;
height: 30px;
width: 100%;
margin: 10px;
}
.container div:nth-child(3n+1) {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
Hope this helps!!!
nth-of-type(n) or nth-child(n) will work.
See the MDN documentation
.container div:nth-of-type(2) {
/* selects the second one */
color: red;
}
<div class="container">
<div>test</div>
<div>test</div>
<div>test</div>
</div>
EDIT: oops! looks like both I and Satwik Nadkarny interpreted your question differently. It probably would be a good idea to use > even in my answer (making it .container > div:nth-of-type(2)) to avoid selecting nested divs within the first set.