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 https://www.microverse.org/ 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

height

75

{display: flex;}

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

flex-direction

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

{justify-content: space-around; }

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

flex-start

bend-end

center

space-between

space-evenly

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

align-items

This property has the values ​​”

flex-start

flex-end

center

baseline

stretch

The properties “

flex-direction

justify-content

align-items

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

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: 

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex
• https://cssgrid.io/ 
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout