A CSS Grid is a two-dimensional layout system for creating web pages and web applications. It allows developers to divide a web page into rows and columns, and then place elements within those cells. This allows for greater flexibility and control when designing a web page, as elements can be positioned and sized based on their relationship to the grid.

Untitled

Layouts

Fixed layouts don’t flow with device , i.e. move when tab size is changed or across multiple devices. Whilst more flexible layouts will adapt with screen size , scale and aspect ratio.

https://www.framer.com/

Media Queries

Breakpoint is where the content will make changes within the given ranges

Kerning

font-kerning: auto ; font-kerning: normal ; font-kerning: none ; font-kerning: loose ; font-kerning: tight ;

Space between the lettering

Also looking at text shadow to give the text a backdrop/ subtle definition

https://www.cssmatic.com/

https://flexboxfroggy.com/

The grid layout system is defined using CSS, specifically the CSS Grid Layout module. This module allows developers to create grid containers and grid items, and then use a set of grid-related properties and values to define the layout and placement of those items.

A CSS Grid can be used for a variety of layout scenarios, from simple one-page layouts to complex web applications. It also provides a way to create responsive designs, which adapt to different screen sizes and orientations, and provides more efficient way for page layouts. This technology is widely supported in modern browsers and it's becoming one of the best practices for layout in web development.

Untitled

adding colours when hovering over the nav so is more interactive and responsive.

Untitled