During years I've been using Bootstrap, the most popular UI library for responsive web design, both for my job and also for my personal projects, but in the software development world new technologies appear every year, the old ones keep evolving. Besides, the web designer has been facing a problem, to make responsive web design to the request of users for more friendly user interfaces for different devices. For this reason, in recent years CSS bring two novelties, flexbox and CSS Grid. Just two weeks ago I had never used these alternatives. My purpose here is to introduce the basics concepts that I have used in these first days of not using bootstrap anymore. So here I am, learning two different ways to make the responsive layouts of the websites. FLEXBOX First of all, let's make a simple degree with flexbox to see how to works. This is our css code { : flex; : ; :center; : ;
} { : ; :blue;
} { : ; :red;
} { : ; :green;
} .flex-content display height 100px text-align font-size 48px .flex-left flex 1 background-color .flex-center flex 2 background-color .flex-right flex 3 background-color In our HTML we will contain this code: this is flexbox < = > main class "flex-content" < = > div class "flex-left" </ > div < = > div class "flex-center" </ > div < = > div class "flex-right" </ > div </ > main The aftermath will be this: In order to use flexbox, we define a " " in the main tag. inside this tag we add another three div tags, the first one use the class " ", which contains the property " ", the second div use the class " "  with the property " " and the last div use the class " " which contains the property " ". display: flex; flex-left flex:1; flex-center flex: 2; flex-right flex: 3; The flex property defines the number of columns to be used, in other words, the flex property defines how many fractions use the current element. In the example we have 6 columns (or 6 fractions) in all the row, as a consequence, the last div uses 50% of the row width because it uses 3 of 6. In the flexbox layout, the size of each element is defined inside the item itself. If we copy the last div and paste it before the first div then the page will look like this: ONE COLUMN With the property "flex-direction" we can control the axis an the direction of the items inside the container. By default, the value of "flex-direction" in the flex container is "row" which makes the items to be added from left to right. "flex-direction" has another three possible values: row-reverse: right to left column: top to bottom column-reverse: bottom to top Let's change the behavior of the items inside the main tag by adding the property "flex-direction: column;" to the flex-container class. { : flex; :column; :center; : ; : ; : ;
} > { : ; :red;
} > { : ; :blue;
} .flex-content display flex-direction text-align height 240px width 480px font-size 24px .flex-content div :nth-child(even) flex 1 background-color .flex-content div :nth-child(odd) flex 3 background-color Four columns inside the main tag this is a flexbox column < = > main class "flex-content" < > div </ > div < > div </ > div < > div </ > div < > div </ > div </ > main When we use a flex container as a column we will need to define a height to the container, otherwise, it will ignore the property "flex" of each item contained. BIDIMENSIONAL LAYOUT For now, we can use flexbox to control one row or one column, but what if want that the content uses multiple rows and columns? unfortunately, flexbox is made by working in just one direction, but we can achieve a two-dimensional behavior by using the property. By default, every new element is always placed in the same line (row or column), this is because, by default, the flex layout has the property " ". Let's change the default behavior: flex-wrap flex-wrap: nowrap; { : flex; : wrap; : ; :center; : ;
} > { : ;
} > { :green;
} > { :blue;
} > { :red;
} .flex-content display flex-wrap height 200px text-align font-size 48px .flex-content div flex-basis 25% .flex-content div :nth-child(3n+0) background-color .flex-content div :nth-child(3n+1) background-color .flex-content div :nth-child(3n+2) background-color And the HTML code: ITEM 1 ITEM 2 ITEM 3 ITEM 4 ITEM 5 ITEM 6 < = > main class "flex-content" < > div </ > div < > div </ > div < > div </ > div < > div </ > div < > div </ > div < > div </ > div </ > main Now we have defined that the container is using " " property, as a consequence, the content will move to the next row when the previous elements have used the 100% of the width. To define how much width will be used by each child's element we use " " property for every child. wrap flex-basis CSS GRID While flexbox is a content base layout, Grid is container-based. As a consequence, in Grid the size of each item in the container is defined in the container, different to flexbox where the size was defined on each container. Another important difference is that Grid was naturally made to manage two-dimension layouts, while flexbox works better in one layout. Let's see a basic implementation of a CSS Grid. { : grid; : fr fr; : ; : ; : ; : ; : ; :white;
  } > { :black;
  } { : ; : ;
  } { : ; : ;
  } { : ; : ;
  } { : ; : ;
  } .grid-container display grid-template-columns 2 1 grid-template-rows 100px 200px font-size 48px width 300px height 300px grid-gap 10px color .grid-container div background-color .grid-1-1 grid-row 1 grid-column 1 .grid-1-2 grid-row 1 grid-column 2 .grid-2-1 grid-row 2 grid-column 1 .grid-2-2 grid-row 2 grid-column 2 four divs inside the tag with the grid layout. 1 2 3 4 < = > main class "grid-container" < = > div class "grid-1-1" </ > div < = > div class "grid-1-2" </ > div < = > div class "grid-2-1" </ > div < = > div class "grid-2-2" </ > div </ > main First of all, our Grid container should have a " " property.  We use the property " " to define the number of columns and the size of each column. The " " the total of columns and the size of each column. " " represents "fraction", therefore " " means 2 fractions from the total of the dimension. In our example, the row dimension has 3 fractions (2fr + 1fr). We can also use pixels instead of fractions for defining the size of each column, the same for the rows. display: grid; grip-template-columns grid-template-columns: 2fr 1fr; fr 2fr With the property " " we defined two rows, the first with a height of , the second with a height of . Also, we defined the property " " to define a distance between rows and columns. Finally, we created a class for each item, to define the column and row where each item should be placed, we can make this with the properties " " and " ". grid-template-rows: 100px 200px; 100 pixel 200px grid-gap grid-column grid-row USING MULTIPLES ROWS AND COLUMNS FOR AN ITEM In the previous example we use and specific row and a column for each item, we can also use more than one row or column for specific items. In this new example, we are going to use six items in a Grid of 3 rows and 3 columns. The CSS code: { : grid; : ; : fr fr fr; : ; : ; : ;
  } > { :blue; : red; : ;
  } { : / span ; : ;
  } { : ; : / span ;
} { : / span ; : ;
} { : ; : ;
} { : ; : ;
} { : ; : ;
} .grid-container display grid-template-columns 100px 100px 100px grid-template-rows 1 1 1 width 300px height 300px grid-gap 10px .grid-container div background-color color font-size 24px .first-item grid-row 1 2 grid-column 1 .second-item grid-row 1 grid-column 2 3 .third-item grid-row 2 3 grid-column 2 .fourth-item grid-row 2 grid-column 3 .fifth-item grid-row 3 grid-column 3 .sixth-item grid-row 3 grid-column 1 And the HTML code: 1 2 3 4 5 6 < = > main class "grid-container" < = > div class "first-item" </ > div < = > div class "second-item" </ > div < = > div class "third-item" </ > div < = > div class "fourth-item" </ > div < = > div class "fifth-item" </ > div < = > div class "sixth-item" </ > div </ > main Each row and column will have the same size. For the first item, we use the property " ", which means that these elements will be placed in both the first and the second row. For the second item, we use " " in order to use both the second and the third column. grid-row: 1 / span 2; grid-column:2 / span 3; CONCLUSION CSS Grid provides a  level of flexibility for two dimensions which is not available in flexbox, but at the same time, flexbox allows each content element to define its size, which makes it easier to define a responsive design when we are working on a specific row or column. As a conclusion, Grid seems to be a better option for defining the general layout of the pages, while flexbox can be more flexible to be used on specific sections of the pages, like a navbar, an aside element or a footer. Compare with bootstrap 3 (which layout methodology is mostly built around float property) both methodologies provide greater flexibility and responsiveness. This was just a first checking of the basic concepts for these two layout systems, all in all, I can conclude that each alternative has its own strengths and weaknesses, the most important is to have the knowledge of each alternative in order to choose the most adequate for every problem.

Too Long; Didn't Read

Making security fun one episode at a time

How to Start to Use Flexbox and CSS Grid in Your Projects

Too Long; Didn't Read

Oscar Russi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Start to Use Flexbox and CSS Grid in Your Projects

Too Long; Didn't Read

Oscar Russi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES