Attempting to create a hexagon using 127 divisions results in a gap

I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below:


for (i = 1; i <= 127; i++) {
  var div = document.createElement('div');
  document.getElementsByTagName('body')[0].appendChild(div);
}


body {
  margin-left: 200px;
}

div {
  width: 40px;
  height: 30px;
  display: block;
  background: green;
  cursor: pointer;
  float: left;
}

/* Additional CSS rules for alternate colored divs and positioning */

While the first three rows and the last three rows appear as expected, there is a noticeable hole in the rows in between. How can this hole be eliminated?

css

Answer №1

Opt for positive margins over negative ones – here's how:

(Furthermore, the entire setup can be easily customized using CSS custom properties)

const frag = document.createDocumentFragment()
for (let i = 0; i < 127; i++) {
  const div = document.createElement('div')
  div.className = `cell n${i+1}`
  frag.appendChild(div)
}
document.body.appendChild(frag)
body {
  --h: 15px;
  --o: calc(var(--h) * 3);
  --odd: lime;
  --even: goldenrod;
}
.cell {
  width: var(--h);
  height: calc(var(--h) * 0.75);
  background-color: var(--odd);
  float: left;
}
.cell:nth-of-type(2n) {
  background-color: var(--even);
}
.cell:nth-of-type(8),
.cell:nth-of-type(16),
.cell:nth-of-type(25),
.cell:nth-of-type(35),
.cell:nth-of-type(46),
.cell:nth-of-type(58),
.cell:nth-of-type(71),
.cell:nth-of-type(83),
.cell:nth-of-type(94),
.cell:nth-of-type(104),
.cell:nth-of-type(113),
.cell:nth-of-type(121) {
  clear: left;
}
.cell:nth-of-type(8),
.cell:nth-of-type(113) {
  margin-left: calc(var(--o) - var(--h) * 0.5);
}
.cell:nth-of-type(16),
.cell:nth-of-type(104) {
  margin-left: calc(var(--o) - var(--h) * 1);
}
.cell:nth-of-type(25),
.cell:nth-of-type(94) {
  margin-left: calc(var(--o) - var(--h) * 1.5);
}
.cell:nth-of-type(35),
.cell:nth-of-type(83) {
  margin-left: calc(var(--o) - var(--h) * 2);
}
.cell:nth-of-type(46),
.cell:nth-of-type(71) {
  margin-left: calc(var(--o) - var(--h) * 2.5);
}
.cell:nth-of-type(58) {
  margin-left: calc(var(--o) - var(--h) * 3);
}
.cell:nth-of-type(1),
.cell:nth-of-type(121) {
  margin-left: var(--o);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason that the accordion is failing to expand or collapse when clicked?

I am facing an issue where the div is not expanding or collapsing upon clicking the + sign. I have tried removing unnecessary scripts but it still doesn't work. Additionally, there is an error in the console: Uncaught TypeError: $(...).slideReveal is ...

htmlcsstwitter-bootstrapbootstrap-4accordion

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

htmlcssjsp

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax

Ensure the scrollbar is noticeable and personalized solely within a designated div, such as the left side menu

In the left side menu, I have set the overflow-y: scroll property and a fixed height that is smaller than the entire page's height. I am trying to make the scrollbar always visible only within this left menu. I attempted using -webkit-scrollbar and -w ...

htmlcssscrollbarvisiblesection508

Whenever I create the code using javascript, padding seems to always show up

I have a basic stacked row layout that displays an upper box and lower box without any padding. <span id="route" class="small"> <div class="row" style="border-style:solid;"> <div class="col-md-12 col-12"> <p>UpperBox</p& ...

javascriptcsstwitter-bootstrap

Utilize JavaScript to compute and implement a deeper shade of background color

To dynamically apply darker shades of background using JavaScript, I have devised the following code. .event-list .bg{ background:#eee; padding:5px; } .grid .event-list:first-child .bg{ background: #2aac97 } .grid .event-list:nth-child(2) .bg{ backgrou ...

javascripthtmlcsscolors

Error encountered on Facebook Like button: The large button is failing to show the total number of likes received

Despite functioning flawlessly for months, the large Facebook Like button has suddenly stopped showing the number of "Likes". Strangely, the compact version is still working fine, but the larger button is concealing the count. I am using a Mac and have obs ...

cssfacebook-like

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

cssreactjs

Struggling with passing values to onClickHandler because of MUI

I'm looking to create a category navigation menu that includes icons and labels. I attempted to do this using Chips: {categories.map((category) => ( <Chip key={category._id} ...

javascriptcssreactjsmaterial-ui

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

htmlcss

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

I'm currently working on creating a popup panel that is centered on the screen with rounded corners (scrollbars are unnecessary) using jQuery min, similar to this example: https://i.stack.imgur.com/0kYO6.png My progress so far: function (package) ...

javascriptcssdom

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

javascripthtmlcssreactjs

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

javascriptcssreactjsonhover

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

javascriptcsshtmlreactjsreact-datepicker

Bootstrap classes not aligning with individual elements

image My content is aligned with the text on the left and the form on the right, which is exactly what I intended. However, everything seems to be outside of my jumbotron container. Below is my HTML and CSS code. Your feedback is greatly appreciated. & ...

htmlcssbootstrap-4

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

javascripthtmlcssradio-button

Placing an element in a fixed position behind a non-fixed element

I am facing a challenge with an element that has two children, one of them is absolutely positioned. My goal is to position this absolutely placed element behind its sibling. Unfortunately, the z-index property doesn't seem to be working as expected. ...

htmlcssz-indexabsolute

Show various Bootstrap Alert Messages based on the type of error detected?

Trying to figure out how best to explain this, here it goes! I am working on a website and I want to incorporate alert messages. Check out some examples here. Depending on the form inputs, I need different alerts to be displayed. PHP will validate the in ...

javascriptphpjquerycsstwitter-bootstrap