CSS Tips and Tricks

Calc(), Grid, and Flexbox

Image for post
Image for post

Calculate

The first CSS tool we will look at is the calc() function that can be added inside our CSS file. calc() is a function that executes or ‘calculates’ an equation inside it’s parentheses. For this example, we will be looking at a basic HTML document in the browser with three divs inside of a parent div. Let’s say we want to make a child div 1/3 of the entire screens width. Well this would be easy if we know the screen will always be a specific size, but calc() allows us to have our size responsive.

Our html file
Our CSS file
Image for post
Image for post
Divs sized using calc

CSS Flexbox

CSS flexbox is a feature of CSS that allows you to style elements on a page in one dimension, either columns or rows, and determine spacing between the elements and the direction they flow. Flexbox is great for a span of elements that needs a consistent display across the board. We can look at the web browser displaying new html and css files, index2.html and styles2.css

Image for post
Image for post
no CSS except colors for each div
Image for post
Image for post
All divs are container to the same line
set the parent container’s display to flex
Image for post
Image for post
space between each element
Image for post
Image for post
align-self example
aligning each div’s content

CSS Grid

Another astonishing tool for CSS styling is the fairly new CSS Grid. Currently, it is supported by almost all browsers and is considered safe to use for web design. CSS grid differs from flex-box because grid allows for a two dimensional arrangement of elements on the page, where flex-box is dimensional. We can look at our original html but with some different CSS to explore the implementation of CSS grid.

CSS now includes grid display
Image for post
Image for post
Our divs are aligned by thirds in a single row
Creates six boxes
Image for post
Image for post
Screen split into thirds
Styles the additional boxes

Rapidly Evolving

CSS, as with every other technology, is always growing and changing. Things like flexbox have been around for over 10 years, but is always undergoing updates. CSS grid is fairly new and really solving a lot of problems left over from flexbox. Things like snap scroll, variable fonts, and aspect ratio units are some other great features to utilize with CSS. I can say with confidence, my knowledge of CSS greatly increased from in just a week after having to build a project without any styling frameworks and really dig into the powers of CSS. Also, in my experience so far, many companies looking to hire a front end developer are more interested in your understanding of CSS than what you can do with a styling library. I encourage you to not overlook the basics of web design, and don’t be afraid to stay up to date with the latest CSS trends. Happy Coding!

Written by

I am a Front End Web Developer and Flatiron Academy alumni looking for new opportunities in New Jersey, New York, or Pennsylvania Area.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store