CSS uses Multi-Column to implement grid layout

The following figure shows a simple design at the bottom of my website (menu and copyright notice) in the small window.

The html structure is very simple:

The code is as follows:	Copy code
<Ul> <Li> <a href = "/"> Home </a> </li> <Li> <a href = "/about/"> About </a> </li> <Li> <a href = "/services/"> Services </a> </li> <Li> <a href = "/portfolio/"> Portfolio </a> </li> <Li> <a href = "/blog/"> Blog </a> </li> <Li> <a href = "/contact/"> Contact </a> </li> </Ul> <P> <small> Copyright & copy; David Bushell </small> </p>

I will create this website with a "mobile phone first" mentality -- if you know how to query the screen resolution (media queries work) -- When my screen width increases, I want to change the bottom menu to three columns:

If you create a website based on a framework or grid system, depending on the grid system conventions, you may need to repeat the CSS here, or you may have to add some additional element tags to display multiple columns, it even forces me to divide a menu list into multiple columns, which is so disgusting! Let's take a look at the simple method.

In this case, CSS multi-column layout is the perfect solution.

The code is as follows:	Copy code
. Footer-menu { Column-count: 3; Column-gap: 1.75em; }

The above two declarations are all the items I need to define for the menu. No matter how many items will appear in the future, the list items will naturally flow into three columns.

The figure below shows the further design results. Here you can see the layout I expected under the big screen (or "desktop. I overlay the lines in the grid system, so you can see the alignment.

 

In fact, I have used two grids to design this website. One has six columns and the other has nine columns. I hope you can see how they overlap and work together.

In the final layout, the copyright information spans two (1/3) columns in six columns, and the menu occupies the remaining four (2/3) columns ). the menu itself-still show multiple columns-is arranged in a nine-column grid (each menu item is neatly arranged in two columns in nine columns ).

It sounds complicated, but CSS does not look like this. There is a way to achieve this:

The code is as follows:	Copy code
. Footer { Overflow: hidden; } . Footer-copyright { Float: left; } . Footer-menu { Float: right; Width: 66.666%; Padding-left: 0.875em; Box-sizing: border-box; Column-count: 3; Column-gap: 1.75em; }

The old floating!

These codes are not very good, but they are indeed effective enough. However, at this stage, it is certainly a good idea to implement a grid based on the coding convention of a site range. Here is a basic introduction I wrote: responsive layout and grid design-a "grid system" does not need to be complex.

Whether you use a pre-built grid system to define your own, or just write the code that shows the layout as I did above, maintenance and scalability are important issues to remember. Writing all styles for various situations is not a good idea, but it is not recommended to use an independent grid system to forcibly plan everything.

CSS provides us with a lot of information. Mixing and matching various encoding technologies to find the simplest method and abstract common mode can make your CSS clean and reusable.