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. https://www.microverse.org/ 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 and of pixels. To place them on the same line, set the property for the parent block. The blocks are in the center of the transverse axis. width height 75 {display: flex;} When we use flexbox, we can arrange our blocks along the main or transverse axis — the property (row, back row, column or back column values). flex-direction Using the following property, we can align all children on the main axis, for example, { : space-around; } justify-content Other values ​​for the justify-content property are “ ; ; ; or . “ flex-start bend-end center space-between space-evenly To align elements along the transverse axis, we can use the “ ” property. align-items This property has the values ​​” , , , or ”. flex-start flex-end center baseline stretch The properties “ ”, “ ”, “ ” apply only to a flexible container and do not work for its children. 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 “ ” 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. 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 { } to the main unit display: grid; 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

Mozilla

ORANGE

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

My Acquaintance with Flexboxes and CSS Grid

Too Long; Didn't Read

Companies Mentioned

Oksana

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

My Acquaintance with Flexboxes and CSS Grid

Too Long; Didn't Read

Companies Mentioned

Oksana

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES