How do I make a honeycomb grid using CSS? - html

I need to create a honeycomb grid wherein the 9 honeycomb filled with red color should always be at center when the screen width changes.
More likely my goal is to have the same effect as background-size: cover / object-fit: cover but for container / elements, so the black honeycomb will just overflow to the screen if the width has become smaller therefore the red honeycomb will always be at center.
This is what I am currently using as basis but I can't seem to the background-size: cover effect + this example is using inline to, so as the width becomes smaller the rows just keeps adding which I want to avoid.
.main {
display: flex;
--s: 100px;
/* size */
--m: 4px;
/* margin */
--f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}
.container {
font-size: 0;
/*disable white space between inline block element */
}
.container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547);
display: inline-block;
font-size: initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: red;
margin-bottom: calc(var(--m) - var(--s)*0.2885);
}
.container div:nth-child(odd) {
background: green;
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}
<div class="main">
<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></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>

What you actually need is two rows of centered elements where the second row is slightly shifted. You don't need that complex code (which I made btw).
I have used 15 elements on the first container and 14 on the second one (minus one). You can add as many element as you want but you have to update the selector to correctly color your 9 elements.
.container {
overflow: hidden;
}
.container > div {
display: flex;
gap: 6px;
justify-content: center;
}
.container > div > div {
width: 80px;
aspect-ratio: 0.866;
flex-shrink: 0;
clip-path: polygon(0 25%,50% 0,100% 25%,100% 75%,50% 100%,0 75%);
background: black;
}
.container > div:last-child {
transform: translateY(calc(6px - 25%));
}
.container > div > div:nth-child(6),
.container > div > div:nth-child(7),
.container > div > div:nth-child(8),
.container > div > div:nth-child(9),
.container > div > div:nth-child(10) {
background: red;
}
.container > div:last-child > div:nth-child(10) {
background: black;
}
<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>
</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>

Related

CSS make squared grid cells with uneven rows and columns [duplicate]

This question already has answers here:
CSS grid square layout [duplicate]
(4 answers)
Closed 2 months ago.
In HTML I create a grid container, and style it in the following way:
height: 95%;
display: grid;
grid-template-columns: repeat(8, auto);
I then fill my grid with divs styled in the following manner.
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
As you can see the tiles are squared, but the grid 'cells' are rectangles. I would like to make the cells squared, so that the gap between tiles on different rows is no longer there.
You can use the gap property to define the gaps between the grid cells. Also make sure, you haven't set the align-content property to a value, that creates space between the rows.
.container {
height: 95%;
display: grid;
gap: 4px;
grid-template-columns: repeat(8, auto);
}
.container > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
}
<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></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></div>
</div>

4x4 grid of squares that scale up to a maximum width

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>

Why don't background colors work in inline-grids

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

How to prevent white-space property inheritance?

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

How can I select a specific instance of an element inside a DIV using CSS?

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.