Loading lesson path
CSS
Flexbox, Grid, and responsive design grouped into one practical layout track.
CSS Flexbox is short for the CSS Flexible Box Layout module.
The Grid Layout Module offers a grid-based layout system, with rows and columns.
Responsive web design is about creating web pages that look good on all devices!
The flex container element can have the following properties:
A grid container contains one or more grid items arranged in columns and rows.
The viewport is the user's visible area of a web page.
The justify-content property aligns the flex items along the main-axis (horizontally).
Inside the grid container you define the number and size of the grid columns and rows.
Many web pages are based on a grid-view , which means that the page is divided into rows and columns.
The align-items property aligns the flex items vertically (on the cross-axis).
The space between the rows and columns in a grid container are called gaps (or gutters ).
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
The direct child elements of a flex container automatically becomes flex items.
Inside the grid container you can define the alignment of the grid content with the following properties:
Resize the browser window to see how the image scales to fit the page.
You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
A grid container contains one or more grid items.
There are many free CSS Frameworks that offer Responsive Design.
The CSS grid-template-areas is a grid container property, and it specifies areas within the grid layout.
We have created some responsive templates with the W3.CSS framework .
Grid items can be aligned within their respective grid cells using properties like:
The CSS order property can be used to define the visual order of the grid items.
A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design.
This is useful for applying styles only when the browser can handle them.