fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

Building better UI with grids


Tegra - September 6, 2019 - 0 comments

Building better UI with grids

Building Better UI with Grids 🔥by @joshwcorbett

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Bonus!

Tegra recommends: build smart, responsive, CSS grid-powered layouts in Webflow visually.

What is a grid system?  It is a structure of invisible lines and columns that hold elements of a design or a webpage together.
Why use it?  Grids are utilized as a structural foundation for a website, it can enhance the overall look and feel by allowing you to create a stronger layout for your elements.
Basic Terminology.  rows, columns, gutter
Laying it out.
12-column grid.  The most common grid system is the 12-column grid. The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns.
Breaking the grid.  To create more visual interest, don't be afraid to step outside of the grid, but be aware it can break the visual hierarchy.
Popular Grid Frameworks.  CSS Grid (built-in)
Bootstrap Grid
Bulma
Foundation
Masonry.js
Flexboxgrid.css
Thanks!

If you learned something today, share the love by following and giving a like! Let’s discuss it in the comments ⬇️

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *