Apps Lanka.

Grid Layout and Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. There have been other methods for controlling web page layout methods, such as tables, the box model, and the CSS flexbox.

Grid was designed for two-dimensional layout - rows, and columns at the same time. Elements can be placed onto the grid within these column and row lines.

Features of Grid layout

♦ Fixed and flexible track sizes

can create a grid with fixed track sizes using pixels.
Ex:- This sets the grid to the specified pixel which fits the layout we desire. Can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose.

♦ Item placement

Can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. The grid also contains an algorithm to control the placement of items not given an explicit position on the grid.

 

♦ Creation of additional tracks to hold content
You can define an explicit grid with a grid layout. The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.

♦ Alignment control
The grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned.

♦ Control of overlapping content
More than one item can be placed into a grid cell or area and they can partially overlap each other. This layering may then be controlled with the z-index property.

Grid is a powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in our grid container.

♦ The grid container
We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

♦ Grid tracks
We define rows and columns on our grid with the grid-template columns and grid-template-rows properties. These define grid tracks. A grid track is a space between any two lines on the grid.

♦ The fr unit
Tracks can be defined using any length unit. The grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.

♦ Track listings with repeat() notation
Large grids with many tracks can use the repeat() notation, to repeat all or a section of the tracklisting. Ex:- the grid definition.

♦ The implicit and explicit grid
The grid also created rows on its own. These rows are part of the implicit grid. Whereas the explicit grid consists of many rows and columns defined with grid-template columns or grid-template-rows.

If you place something outside of the defined grid or due to the amount of content, more grid tracks are needed then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them. You can also define set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.

♦ Track sizing and min-max
When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. The grid has a solution for this with the minmax() function.

♦ Gridlines
It should be noted that when we define a grid we define the grid tracks, not the lines. The grid then gives us numbered lines to use when positioning items.

♦ Grid cells
A grid cell is the smallest unit on a grid. Conceptually it is like a table cell.

♦ Grid areas
Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas must be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

♦ Gutters
Gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap.

♦ Subgrid
A subgrid, which would let us create nested grids that use the track definition of the parent grid.

♦ Layering items with z-index
Grid items can occupy the same cell, and in this case, we can use the z-index property to control the order in which overlapping items stack.

Features of Flexbox

♦ The two axis of the flexbox
When working with flexbox we need to think in terms of two axes (The main axis and the cross axis.) The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes.

♦ Start and end lines
Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right-hand side, with new lines appearing one under the other.

♦ The flex container
An area of a document laid out using a flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

• Items display in a row (the flex-direction property's default is a row).

• The items start from the start edge of the main axis.

• The items do not stretch on the main dimension but can shrink.

• The items will stretch to fill the size of the cross axis.

• The flex-basis property is set to auto.

• The flex-wrap property is set to no-wrap.

♦ Multi-line flex containers with flex-wrap
While flexbox is a one-dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, we should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines on either side.

♦ Properties applied to flex items
To have more control over flex items we can target them directly. We do this by way of three properties:

• flex-grow

• flex-shrink

• flex-basis

♦ Alignment, justification and distribution of free space between items
A key feature of flexbox is the ability to align and justify items on the main- and cross-axes and to distribute space between flex items. Note that these properties are to be set on the flex container, not on the items themselves.