"Trouble with 3D hexagonal grid in CSS - unable to achieve desired display

In order to create a dynamic Hexagonal Grid using CSS, the objective is to automatically reorganize hexes in a circular or rectangular manner when a new div with a specific class (e.g. 'hexes') is added to the view.

Currently, there is a grid with numerous hexes organized in columns of 4 hex-boxes with some animations. Rows can be added to the columns, but it is not responsive or self-ordered.

Below is a snippet of the existing code:

body { background-color: #171d25; }

<!-- More CSS Code Here -->

If we want to display only half of the hexes, seven divs with the class 'column' would need to be removed. However, the hexes will not expand or center themselves.

An attempt was made here to enlarge the hexes and align them centrally, but it needs further refinement.

It has been suggested to utilize @media queries for responsiveness, which is a feature I have limited experience with. The goal is to make the grid responsive and dynamic, particularly for use with AngularJS by utilizing ng-repeat so that the number of options is unknown and they are displayed neatly. Additionally, there are plans to include functionalities like inserting an image in the middle of a hex, displaying an image over the name of the hex, and showcasing information with animations.

htmlcssangularjs

Answer №1

To achieve the desired layout, using media queries is currently the most viable solution. The approach involves determining the width of the hexagons, utilizing the :nth-child() selector to adjust every second row without wrapping the hexagons in rows. Instead, setting them as inline-block, and specifying breakpoints with media queries based on the hexagons' width. Modify the value inside :nth-child() as needed when the viewport width changes.

For example:

<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<style>
  .hex{
    width:100px;
  }
  @media(min-width: 200px) and (max-width: 299px){
    .hex:nth-child(3n){
      margin-left:50px;
    }
  }
  @media(min-width: 300px) and (max-width: 399px){
    .hex:nth-child(5n+4){
      margin-left:50px;
    }
  }
  @media(min-width: 400px) and (max-width: 499px){
    .hex:nth-child(7n+5){
      margin-left:50px;
    }
  }
  @media(min-width: 500px) and (max-width: 599px){
    .hex:nth-child(9n+6){
      margin-left:50px;
    }
  }
</style>

The formula for this logic is:

for(i = 2; i < .hex(length); i++){
  @media(min-width: i * .hex(width) ) and (max-width: (i * 2 * .hex(width)) - 1){
    .hex:nth-child(((2*i)-1)n+(i+1)){
      margin-left:.hex(width)/2;
    }
  }
}

This method is effective for horizontal (pointy) hex grids but can be adjusted for vertical (flat) hex grids by tweaking the formula slightly.

Check out the fiddle here: https://jsfiddle.net/q2my8vcn/ (Some modifications have been made, still a work in progress, but it demonstrates the basic concept effectively.)

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

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

Ensuring complete height and width with no scrollbar in a Material UI React application

I'm attempting to create a page that fills the entire height of the screen without adding an undesirable scrollbar. When I say 100% height, I mean it should just fit the size of the screen. Here is a demonstration of the issue. The yellow highlighted ...

htmlcssreactjsmaterial-ui

Alter the color of the span text without affecting the :before or :after elements

Can you change the text color of a span without affecting its :before and :after colors? Is it possible to modify the color of the main text in a span element without altering the colors of the elements that come before and after it? Here is an example o ...

htmlcsssass

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

javascriptjqueryhtmlcssjoomla2.5

Automatically updating client-side values in AngularJS using setInterval()

Implementing a value calculator on the client side using AngularJS. I need to update the main value of the calculator every 5 minutes with setInterval(). This is my AngularJS code: $http({method: 'GET', url: '../assets/sources.json'} ...

javascriptjsonangularjssetinterval

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

javascriptjqueryhtmlcss

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

I've set up a page layout with two columns, one fixed and the other scrollable. The left column is fixed (containing Google ads) and stays in place as I scroll down the page. The right column displays posts and scrolls along with the rest of the con ...

javascriptjqueryhtmlcssposition

Make ui-router reload when the querystring is modified

In my current state configuration, it is defined as follows: $stateProvider.state("app.search", { url: "/search?q", templateUrl: "App/Search.html", controller: "SearchController as vm", }); When I need to navigate to the search page with a sp ...

angularjsquery-stringangular-ui-router

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

I need some assistance, please. Can someone explain why the Bootstrap card is staying aligned to the left in mobile view

I've tried everything, but it's still not working. Can anyone help me out? Here are some photos. BEFORE AFTER When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would great ...

htmlcsswebframeworksbootstrap-5

Testing with karma/jasmine in AngularJS can lead to issues when there are conflicts between test

Currently experiencing challenges while running my midway tests (or integration tests, which are halfway between unit tests and E2E tests). Working with an AngularJS build featuring RequireJS, I am utilizing the RequireJS plugin in Karma to run the tests. ...

javascriptangularjsautomated-testsintegration-testingkarma-jasmine

Is it possible to dynamically update the currency symbol in an AngularJS filter?

Query Background: I have a dropdown menu with 4 country options: UK (United Kingdom), US (United States), FR (France), GER (Germany). Depending on the selected option, I need to filter a price in my Controller's Scope object to display the correct cu ...

angularjsangularjs-filter

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

After finally resolving some of the Javascript issues I was facing, I have streamlined my code to utilize just one library now, which is a huge improvement from how chaotic it was before. However, I have noticed a slight delay in the page load time, and I ...

javascriptjqueryhtmlaudiolightbox

Is it possible to include multiple names in the package.json file and perform an npm installation by specifying one of those names?

My primary project incorporates various services such as frontend, backend, Algolia, notifications, etc. Each service has its own specific package.json file. I am looking to merge all the different package.json files into a single package.json file and re ...

angularjspackagenpm-install

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

javascriptangularjs

Opacity is causing issues with hover effects in CSS

I'm facing an unusual CSS challenge. Check out this simple code snippet below that showcases the issue: <html> <head> <style> .hover { float: right; } .hover:hover { background-color: blue; ...

csshoveropacity

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

javascriptphpjqueryhtmlajax

What is the proper way to include a parameter in an ASP onclick function within a table row?

Below is a table row declared within a listview: <tr onclick="<%= _jsPostBackCall %>;" /> When calling a postback method on the backend, I need to retrieve the tr index: public void RaisePostBackEvent(string eventArgument) { ...

asp.nethtmlhtml-tablepostback

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

javascripthtmlreactjscheckboxmaterial-ui