3 Ways to create a Navbar (CSS Grid Layout)
☕ SUPPORT MY WORK 🙏
https://ko-fi.com/crayoncode
https://www.buymeacoffee.com/crayoncode
Today let's work with CSS grid layout to create 3 different navbars without even touching the markup once it's written. Let's go and find out how.
The following CSS Grid Layout properties are used:
grid-template-columns for defining the sizes of each grid column, e.g. min-content/max-content for fitting the grid column around its content and auto for filling remaining space.
grid-template-areas for defining named areas within a grid, whereas grid-area allows to assign elements to a named grid area such that the order in the markup becomes almost irrelevant.
grid-auto-flow for defining in which direction automatically generated cells in a grid are put. In our case we're going to use the value "column".
grid-auto-columns allows us to define the size for each new automatically generated grid column.
⌨️ CODE
As always CSS custom properties (aka variables) are used for easy customizing, so you're all set for using this in your own projects:
▶️ https://codepen.io/crayon-code/pen/OJ...
🖇️ USEFUL LINKS
🔗 A Complete Guide to Grid https://css-tricks.com/snippets/css/c...
🔗 Google Fonts: https://fonts.google.com/
🔔 SUBSCRIBE & LIKE
▶️ / @crayoncode
⏱️ TIMESTAMPS
00:00 Basic Setup
01:16 Logo Styling
01:46 Navigation Items Styling
02:57 Hover Effect
04:23 User Menu Styling
04:46 Version 2
05:24 Version 3
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS
#css #gridlayout #tutorial