4.5 Grid System

• The reusability of code can be improved with the help of grid system
• The grid system provides a series of class names that can be added to the markup to structure a part of the web page into rows and columns. It should only set the width and positioning of the container, and not provide visual styles such as colors and borders to the web page.
• Most popular CSS frameworks include their own grid system. Their implementation details are different, but the design ideas are the same: place one or more column containers in a row container. The class of the column container determines the width of each column.

4.5.1 Understanding the grid system

• Usually each row of a grid system is divided into a specific number of columns, usually 12, but other numbers are also possible.
• 12 is chosen as the number of columns because it can be divisible by 2, 3, 4, 6, and the combination is flexible enough
  
• Grid system
  Each row has a row container div (column-n: n is the number of columns in the grid)

4.5.2 Build a grid system

• Use the grid system to transform the previous page
  
• CSS for grid rows
  The above code only achieves clear floats. This is to avoid adding a row element every time it is addedclearfixclass
• CSS for grid columns
  ＊=The comparison operator can match any value that contains the specified string. For example, in this example, it can match the element where column- appears anywhere in the class attribute
  Current page:
  
  It does not seem to be an ideal effect, because the media objects repeatedly implement some styles of the grid system.
  Now simplify the style of the media object. Remove the left float, because the grid system already contains this rule. Remove the width so that it can fill 100% of the width of the container. Remove the margins and the nth-child selector used to clear the float.
  
  Because all the margins of the media object are deleted, including the bottom margin, the space between the media object in the last row and the bottom of the container is lost. Add bottom padding to the container to restore the spacing
  

4.5.3 Add interval

• Add space between each column
  
  However, this code caused a slight misalignment of the contents of the grid columns and grid rows
  
  Add a left margin of −0.75em to the row element, and stretch the left side of the row element to the outside of the container. The inner margin of the column element will push the content inside by 0.75em to the right, and the first column will be left aligned with the page title (as shown in Figure 4-21.). Similarly, add a negative right margin to the row elements to stretch the right side.
  

Complete style