• MacScientistGirls

Macademics: What's the Difference? CSS layouts, spacing, and sizing.

Updated: Feb 14


Hello Everyone! Happy Black History Month! This week we are giving you the first installment of the year of our Macademics Series. For those who are new Macademics is a series we started in which we educate people on something within the STEM field. This week I'm going to talk about some CSS properties and the differences between some of them. If that sounds interesting to you, read on!



Cascading Style Sheets (CSS) is a styling language used to add design and color to mobile and desktop sites. It's what gives any site that you go onto on the internet the color and the personality that you see and what makes all the websites a little or a lot different. CSS can be a little bit tricky because it can often feel like a guessing game. Like all languages everyone has their own way of styling but sometimes coding CSS can feel like a guessing game. Here are some concepts that will at least set you on the right path for styling your next page.



Grid vs. Flexbox


Grids and Flexboxes are both used for the layout of your page. The main difference is that grids handle two dimensional layouts (columns and rows) whereas Flexboxes only deal with one dimension (columns or rows).


For Grid Layouts you have to write CSS rules for both the container and the children inside of the container. You can write rules for a grid layout like this:




The display property lets us know that we're creating a grid layout, grid-template-columns allows you to specify how many columns and what width you want those columns to be in a given row and grid-row-gap specifies how much space you want between the rows of your layout. This block of code says that for this grid layout we want 3 columns with 60px between each row in the grid.


For Flexbox layouts you need to specify the layout for just the container itself. Here's an example of a coded Flexbox layout:




Similar to grid the display property specifies that it is a grid layout. The flex-direction allows you to specify if you want all of the children in your container to go vertically or horizontally. With the justify-content property, you're writing the rule for how you want the children within your container to be spaced out within the container. Lastly the flex-wrap property writes the rule for how you want the children to try and fit on one line or multiple lines. This block is saying that for our flexbox container we want the flex-direction to be from left-to-right, we want the children to be spaced evenly in the container and we want all the children to squeeze into one row.


One thing to note about Flexboxes is that we have to write rules for spacing with the children in order to prevent the children in the flexbox layout from overlapping.


Margins vs. Paddings


Margins are used to specify how much white-spacing you want around the <div> you've created in HTML. Paddings are used to specify how much spacing you want inside the <div> you created.




Sizing: em, px, and %


Em, px, and % are all units of measurement for css. While you can use any of them to get you to the sizing that you wanted, there are some rules, to understand when best to use each of them.


Pixels came before the era of responsive design and are fixed sized units. While often times they are used for font-sizing rules in css, they are a fixed size which means regardless of what size screen you are using, they don't change.


Em allows for more flexibility in your designs and 1em = 16px. This allows you to have scalable sizing regardless of what size the screen is that you are using. Ems are often used for paddings and margins in css. If you're using em and pixels, in your css the best way to make responsive design is to change the base level elements (<body> and <html> ) to a base pixel unit that can be the base point for em to reference throughout the doc.


Percents are always relative to another value whether it be the parent value or something within the element itself. Percentages are mostly used for the width and height of containers or images.



I know I probably filled you all with A LOT of info, but once you start using them, it becomes like second nature to you. If you want to play around with some of these rules yourself, I created this github repo with all of the topics that I explained. Check it out!




13 views
  • Facebook - Grey Circle
  • Grey Twitter Icon
  • Grey Instagram Icon
 Copyright © 2019 MacScientists, LLC | macscientistteam@gmail.com | "Changing the face of STEM"