IXD101 ( 30249 ) - Interaction Design Fundamentals. 2022-23
This week we looked at CSS grids.
Flexbox and Grid are both layout systems for building responsive and flexible web pages. They are both supported by modern web browsers and can be used to create complex and flexible layouts with minimal CSS code.
Short for Flexible Box Layout, is a one-dimensional layout system that arranges elements in a row or a column. Elements can be laid out in any direction (left to right, right to left, top to bottom, or bottom to top) and can be aligned and spaced along the main axis or cross axis. Flexbox is great for creating flexible and responsive navigation bars, grids, and other layouts that need to adjust to the size and orientation of the screen.
On the other hand, is a two-dimensional layout system that arranges elements in a grid of rows and columns. Elements can be positioned and sized along the grid's rows and columns using grid lines and grid areas. Grids are great for creating more complex and detailed layouts, such as multi-column and multi-row layouts, and can be used for everything from simple grids to complex web applications.
CSS Grid Layout is a two-dimensional layout system for the web. It allows web developers to create grid-based layouts using CSS, rather than relying on floats and other layout hacks. With CSS Grid, you can create complex and responsive layouts with a relatively small amount of code, making it a powerful tool for building responsive and dynamic user interfaces.
A grid is made up of rows and columns, and you can use CSS Grid Layout to specify the size and position of grid items (which can be elements in your HTML) within those rows and columns. For example, you can use CSS Grid to create a multi-column layout with equal-width columns, or you can create a masonry-style layout where the items have different sizes and positions.