My Acquaintance with Flexboxes and CSS Grid

Until recently, I was only browsing the site as a user. Yes, of course, I noticed that the appearance of the pages of sites that I view on the Internet changes over time.When I visit famous sites now, I see that they have become more convenient, colorful, interesting and functional.Many websites now look very good on any size screen.I became a student Microverse  a few months after writing my first line of code.When I started learning HTML and CSS, I became acquainted with two useful tools for placing and aligning elements on a page — Flexbox and CSS Grid.So, tools that make life easier for the developer have existed since 2011 (Flexbox) and 2017 (Grid). Almost all modern Internet browsers currently support them, and layout has now become much faster and easier.When we work with Flexbox and CSS Grid, we can arrange the content blocks (elements) of the page in just a few lines of code. This means that we will solve all the basic problems of the layout faster and the number of lines of HTML and CSS code will be less.Now let’s take a closer look at how this works.

We took the parent block with the flex container class, which contains 5 orange children, each of which has a

width

and

height

of

75

pixels. To place them on the same line, set the

{display: flex;}

property for the parent block. The blocks are in the center of the transverse axis.

When we use flexbox, we can arrange our blocks along the main or transverse axis — the

flex-direction

property (row, back row, column or back column values).

Using the following property, we can align all children on the main axis, for example,

Other values ​​for the justify-content property are “

flex-start

;

bend-end

;

center

;

space-between

or

space-evenly

. “

To align elements along the transverse axis, we can use the “

align-items

” property.

This property has the values ​​”

flex-start

,

flex-end

,

center

,

baseline

or

stretch

”.

The properties “

flex-direction

”, “

justify-content

”, “

align-items

” apply only to a flexible container and do not work for its children.

Using flex properties, we can also

• stretch or compress an element (flex-grow)
• arrange the elements inside the parent block in several lines (flex-wrap)

If our elements in the flex container are arranged in several lines, we can also use the “align-content” property with the values: “

flex-start

,

flex-end

,

center

,

space -between

,

space-around

,

stretch

”.

In this case, the “

align-content

” property will determine how the rows of blocks will be aligned vertically and how they will together occupy the entire space of the flex container.

Grid CSS is simple.The procedure here is as follows:

• we create one main block and put other blocks (sections) into it
• Add the property {

  display: grid;

  } to the main unit

Now we will apply CSS mesh properties to all elements of our main block.A grid is a set of intersecting horizontal and vertical lines that divide the space of a grid container into areas into which grid elements can be placed.Grid lines are invisible horizontal and vertical lines on either side of a row or column.On the grid line we can refer:

• using a numerical index,
• using grid-column-start, grid-column-end, grid-row-start-start and grid-row -end properties

When working with a grid, we can change the location of the grid elements without affecting the HTML.

We can also mark lines using “

grid-area

”.

If the grid elements do not have a specific location with grid-area, grid-column, grid-row, then they are automatically placed according to the order written in the code. We can change this with the “order” property, which accepts both positive and negative values.Grid cells can be created with fixed sizes (“px”), relative sizes (“em”, “rem”), and also with flexible sizes — “%” or “fr” (fraction). There are also “align-self” and “align-items” properties.“align-items” sets the “align-self” property for all children of the grid, that is, we can set this property individually using “align-self” for the grid element.The documentation on Flex-box and Grid properties can be found here: 

•  
•