CSS Grid
CSS Grid, often referred to as CSS Grid Layout or Grid, is possibly one of the most powerful tools for CSS and web development to date. CSS Grid is a two-dimensional layout system based on a grid which changed the way we create layout for user interfaces on the World Wide Web today.[1] Before CSS Grid was created web developers were limited to what tools and methods they could use in order to create the layout needed to match the design of the website design, these methods included CSS Tables and Floats which were not ideal as there purpose was for something completely different to creating layouts for a web page. One common practice within web development was the use of floats in or to create column based layouts but this would often create errors within a website and is often quite tricky to get working as you need to ensure the float is cleared after each section using one to avoid any breaks within the code of the page.[2] CSS Grid is extremely easy to use and was created to solve this problem and make it a lot easier for web developers to create more dynamic layouts without having to use tables or floats in order to do so, this changed the way we approach web development and paved the way for new technology within the web development industry.
CSS Grid vs CSS Flex Box
Another tool in the web developers arsenal to create grid based layouts is CSS Flex Box which allows you to create dynamic layouts through very little CSS code, while Flex Box and CSS Grid are completely different they are often used for the same purpose. It is common to see CSS Flex Box used in certain user interface components such as navigation bars and UI cards, for example pricing cards. Personally I find that Flex Box is perfect for creating certain interface elements like mentioned previously but I find it can become a little overwhelming when it is used for creating the overall layout of a website design. CSS Grid is a lot easier when it comes to creating the layout for the overall web page as it allows you to define a specific number of columns, rows and also allow you to defines specific grid areas that span across a certain number of rows and/or columns. The grid-template-row and grid-template-column properties are used to define a specific number of rows and/or columns, paired with the repeat(8, 1fr) value and fraction amounts, CSS Grid can become extremely dynamic and responsive as you can define a specific number of columns that are divided by the screen size of the device the web page is being displayed on, this is extremely important in the modern world of web development as we have access to the internet across multiple devices like tablets, smartphones and wearable tech as opposed to just a computer.
Responsive Design
Responsive design is more important now than it ever has been in the past, throughout the past decade technology has had a vast amount of development with the introduction of smartphones, tablets and wearable tech such as smart watches, this is rapidly becoming more and more advanced by the day. As the screen resolutions of all of these devices are different it is important for web developers and designers to ensure the web page is being displayed correctly across all of them without any errors or breaks in the code used to build the interface. Responsive design is used to solve this problem as it allows web developers to define specific styling properties and values when the screen resolution hits a certain size, for example when the screen size is 375px which is the width of the Apple iPhone XS the web developer may want to display the website in a single column layout to ensure the content is easily read and every element on the web page is visible, this is done through the use of CSS Media Queries.[1]
Media Queries
Media Queries are used in the CSS document to define specific styles when the screen resolution hits a certain width, this can either be above a certain screen resolution or below a certain screen resolution by using the min-width or max-width value. Media queries are written as @media screen only and (max-width: 375px), this defines that the changes should become active when the value specified is hit. This would define specific styles when the screen resolution is displayed at 375px and below, this is common practice for the majority of mobile devices ion the modern age.[1] In addition to CSS media queries being used to change the styling of specific elements when the screen resolution changes, it can also be used for when a user is wanting the print the web page as a document, for example if the web page has a black background the developer may change the background to white and the text to black in order to save printing ink.
I have included a screenshot of some code I wrote for one of my project to demonstrate how CSS Media Queries are written in CSS.
References & Sources
- Duckett, J., 2011. HTML and CSS. John Wiley & Sons.
- CSS-Tricks. 2021. A Complete Guide to Grid – CSS-Tricks. Available at: https://css-tricks.com/snippets/css/complete-guide-grid/.