Exciting Developments from Mozilla and Their New GitHub Page

Mozilla has hosted a wealth of web design and programming information within their new Github page. Their new "playground" will introduce newcomers and experienced programmers alike to learn about CSS Grid.

The page starts out with a standard introduction to CSS Grids and then dives into terminologies specific to the platform. Many of the commands are rather simplified so those that know CSS should be able to master it rather quickly.

See Mozilla's Github Page.

Their playground then starts off with a tutorial on how to build your first grid layout. Once you follow the interactive steps, you should have a CSS grid complete and basic knowledge of the syntax.

The implementation of Firefox Dev Tools are highly recommended by the Mozilla team as it can increase the efficiency of your code when ran on Firefox and other Mozilla products. It will also give the user a way to test and interactive with grids before putting it live on their website. Try out the new developer tools requires either Firefox Nightly or Developer Edition.

The FR Unit

This is one of the most exciting implementations within Grid. The FR Unit, which is short for fraction, is able to calculate and fill in only a fraction of the remaining grid space. The repeat() notation can also be used within this unit in order to repeat redundant lengths within a block of code. Using px and em, you will also be able to mix up different grid sizes.

If you are a developer, feel free to play around with their new set of tools so that you can expand your arsenal. This is a great solution to solve the inconsistency otherwise found in other CSS grid layouts. It also is able to integrate well with Flexbox and other similar technologies. Keep in mind that CSS GRID will not work with Internet Explorer 9.