I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German

Hexagons & grids do not mix … are you sure ?

18. June 2017




Hexagons & grids do not mix … are you sure ?

CSS responsive grid of hexagons allows you to easily create just that for images and some text. Nice way to present a portfolio.

  • The hexagon grid is responsive according to the width of the container (#hexGrid)
  • Hexagons keep their aspect ratio according to their width
  • The number of hexagons per row is adaptive and changes from 5 to 2 on media query break points
  • A title and short text slide in on hexagon hover and focus
  • Hexagons and can be cycled through with tab (keyboard navigation)

GitHub

 




Related Content

portalZINE NMN | Development meets Creativity | css grid
Gutenberg Grids & Timber ++ Some CSS Grid Magic!

A grid mystery Somehow the Grids Layout Builder for Gutenberg ist not pushing styles to the footer within a Timber theme. At least not for me. Somehow the wp_footer action within the Grids plugin is not being executed and no grid styles are added to the footer. I am not getting any errors, but will […]

portalZINE NMN | Development meets Creativity | cubicfusion grid tweaker
cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when it comes to native controls. The fine-tuning of the grid container items need to be done using Advanced CSS. If you are looking for a simpler way without using Advanced CSS, I started building out a Grid Tweaker for Elementor. […]

portalZINE NMN | Development meets Creativity | bookstack csv parsing grid
Bookstack: Embed local CSV files

What is Bookstack BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content. BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users […]

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments


team_alex

Alexander Gräf

Portfolio

Book Me

Get in touch

Live Chat

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs

 

I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Services
Previous Next