CSS is a powerful tool not just for styling elements of a webpage, but also controlling the layout. CSS Flexbox and CSS Grid provide designers and developers with more opportunities to create interesting and responsive layouts. While HTML is naturally responsive, using fixed sizes for elements within the CSS removes this responsiveness. Its why we should always use units such as rem, fr or a percentage when giving elements a size. Media Queries also allow us to set different styling rules, depending on the size of the screen the webpage is being viewed on.
This week’s class was another workshop, following on from the previous two weeks and took us into more advanced CSS and how to use it effectively. We continued to work on our Baskerville page and add more features to it. We also covered media queries, which allow us to set different CSS for different screen sizes. As well as some more advanced styling such as drop shadows, setting accurate kerning and background images. The most important elements we covered were CSS Flexbox and CSS Grid. Both of these allow us to control where our content is positioned on a webpage with accuracy, although they have different use cases.
To learn how to use CSS flexbox, we were directed by our lecturer to the website flexboxfroggy.com. This provides twenty-four levels to teach you all you need to know about CSS flexbox, in a game. You use CSS flexbox to move frogs onto their lily pads. It may sound silly, but combining using the CSS code and seeing its effects visually is a really intuitive way to learn. I enjoyed working through all twenty-four levels and feel it really has gave me a much better idea of how to use CSS flexbox in my own web design work. Below is a screenshot to show I completed all the levels, and if I ever needed a refresher I would definitely use this tool again.
CSS grid is a great way to layout a webpage as it allows for many different layouts to be achieved. If used in conjunction with the sizing unit fr, it also is fully responsive, essential in today’s designs. Fr units do not have a fixed size, they adapt to the screen size the content is viewed on. Thankfully they do follow a simple rule where 2fr is double the size of 1fr, 3fr is three times the size of 1fr and so on.
CSS grids are the same as any grid, they offer the ability to specify a number of columns and rows to build up a grid structure. Using this grid structure you can create numerous page layouts. By sizing column widths differently you can achieve a full width header with two equally sized columns below and four images placed side by side below that. There are many different properties within CSS grid to control columns, rows and the content within them, all of which add to the control a designer can have over their design.
Below you can see several layouts which could be created using CSS Grid.
Source (https://www.moonlearning.io/blog/css-grid) Last Accessed 27/12/2022
You can also use CSS grid to style only some parts of your webpage say a grid of images for example. This is what we did in our class exercise this week. We used CSS grid to place two equal width images side-by-side on our Baskerville webpage. By using CSS grid we were also able to align them under our text and leave a suitable gap between the images. To use CSS grid in this way you need to create a div in your HTML which gives you a container in which to place your grid. You then place your images within this div. The rest of the grid is created within the CSS, setting up the amount of columns and rows and other key properties of the grid. Below you can see this code and the finished grid within the webpage.
HTML
CSS
