Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to learn CSS Grid layout". In daily operation, I believe many people have doubts about how to learn CSS Grid layout. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to learn CSS Grid layout"! Next, please follow the editor to study!

Why only 20%?

For a programmer, laziness is a virture from Larry Wall

You are lazy and you are right. As far as possible, a programmer should seek efficiency (a way out of laziness). The same is true of our daily study, sometimes we may have worked very hard but have not improved. It is probably that we put 80% of our energy on the 20% that is useless, and we seem to be talking about ourselves in one step.

CSS's Grid layout module is quite complex, even more complex than FlexBox layout (it's hard to learn Flex layout). It is not because of the theoretical difficulty of Grid layout, but the introduction of 18 new attributes in this module is unheard of in traditional CSS layout concepts.

Well, do we need to understand all the new attributes immediately? NO, it's not necessary, and you can't remember it, even if you remember it for a while, you won't remember it forever.

You only need to learn a little bit to achieve the effect you want, and then you can continue to delve deeper into other attributes.

What is the CSS Grid layout?

If you are new to CSS, then the Grid layout may be a little weird for you. So do you know Flexbox?

I like to think of Grid layout as the younger brother of the current more mature Flexbox layout.

Dealing with CSS layouts is often complex and tedious. The arrival of Flexbox brings new hope to web layout, and the upcoming popularity of Grid will bring us more.

Goal orientation

After learning the original text, you can achieve the layout of a responsive music application.

Part 1: 10% of them (1amp 2)-basic terminology

Grid container

In any application we have ever implemented or seen, in terms of visual presentation, the content blocks are arranged and placed within a certain boundary.

Simply put, a "grid" is multiple intersecting lines (horizontal and vertical lines) that plan a location space that can accommodate other elements.

If you have ever used software such as adobe, photoshop, sketch, then you can easily understand.

In the semantics of the CSS Grid layout, the Grid container is a carrier (the father of the Grid world) that can hold all the children of the grid.

Suppose you have a layout requirement, as shown in the figure:

The layout consists of a grid container and multiple cells. The outermost rectangle serves as the carrier of the entire layout; the smaller rectangle is the cell.

Grid line

The horizontal and vertical lines in the figure are used to divide the grid container.

Grid element

Grid element is the smallest cell in grid layout, which is surrounded by four adjacent grid lines.

Grid region

The grid area occupies at least one grid cell, and * * can occupy the entire grid container.

In the following illustration, the area covered by four grid cells forms a grid area.

Grid orbit

I don't like academic definitions very much. Grid tracks can be thought of as another fancy alias for columns or rows. The space between any two grid lines.

To sum up, we have finished half of our goal. I hope you will have the patience to read on.

Part 2: part 2 of the last 1 Candle

Now that we know the basic terms, let's play.

Declare a grid

Like Flexbox, it all starts with a single line of code. Display: grid or display: inline-grid.

For example, use the div tag as a grid container:

Div {display: grid;}

Declare rows and columns

What's the point of a grid container without rows and columns? To create the columns and rows of the grid container, you will use the following two new css properties, grid-template-columns and grid-template-rows.

So how do you use them? It's very simple.

Grid-template-columns is used to declare columns, and grid-template-rows is used to declare lines.

If you pass several values to the property, it will be divided into several rows or columns accordingly. For example:

Grid-template-columns: 100px 200px 300px

The above code divides the grid container into three columns with widths of 100px, 200px, and 300px

Grid-template-rows: 100px 200px 300px

The code divides the grid container into three rows with a width of 100px 200px 300px

Let's apply two lines of code to the container at the same time, and we'll get a grid of three rows and three columns.

Grid-template-columns: 100px 200px 300px grid-template-rows: 100px 200px 300pxPart 3: it's time to write some code  

In order to quickly implement a music App, we will use CodePen for development.

Build html structure

As for why it is written in this way, please read on.

Body as a music container

Body {display: grid; min-height: 100%}

The above code has turned body into a grid container, continuing to declare rows and columns.

Container planning

How to plan the rows and columns of the grid? let's review what the music APP looks like.

Well, then we can probably divide the layout into two rows and two columns.

To conceive the picture above, there are a few points to pay attention to:

About columns:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

* columns must have fixed width 50px

The second column fills up the remaining space

About the line:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Line 2 fixed height 100px

* Line automatically fills the remaining height

Fortunately, the Grid layout provides a new unit that can solve the above problems. Unit of fr score. This unit can solve the problem of automatic allocation of remaining space.

If you need three columns of equal width, the fr units will automatically allocate space evenly.

If you want to add more elements to your business, don't panic, the fr unit will do it automatically.

More cleverly, if you have a fixed-width element, you can also handle the remaining space very well.

Body {... Grid-template-rows: 1fr 100px; grid-template-columns: 50px 1fr;}

If you have any questions about the fr unit, please read the CSS Fractional Unit (Fr) In Approachable, plain Language.

Use the grid area to place child elements

We have declared a grid system, now let's continue to implement it. The purpose of this section is to learn to use grid areas to lay out sub-elements. Recall that the grid area is an area divided by four grid lines.

Alas, I really don't want to translate, just give the code and explain it. Zoning requires the use of another new feature, grid-template-areas. Grid-template-areas provides a very visible and acquired way to divide regions.

Body {... Grid-template-areas: "sidebar content"footer footer";}

The above code means.

Let's summarize all the code again:

Container

Body {display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 90px; grid-template-areas: "sidebar content"footer footer";}

Child element

.main {grid-area: content;} .footer {grid-area: footer;} .aside {grid-area: sidebar;}

Code

At this point, the study on "how to learn CSS Grid layout" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.