Learn and use Grid layouts using the 20/80 rule.

introduce

This article won’t cover all the details of Grid layout, but is intended for those of you who want to use it quickly and see the results. I’m going to introduce you to 20% of Grid technology, learn this you have 80% of Grid power, happy not 🤒.

Why only 20%?

For a programmer, laziness is a virture from Larry Wall

You have a right to be lazy. Whenever possible, a programmer should seek efficiency (the lazy way out). Our daily study is the same, sometimes may have been very hard but did not improve. It’s probably the 20% that we spend 80% of our energy on that doesn’t work. It’s like we’re talking about ourselves.

CSS’s Grid layout module is quite complex, even more so than FlexBox layout (Flex layout is hard to learn). It’s not that Grid layout is theoretically difficult, it’s just that the module introduces 18 new properties that are unheard of in traditional CSS layout concepts.

Well, do we need to understand all the new attributes at once? And you can’t remember it. Even if you remember it for a while, you can’t remember it forever.

It only takes a little bit of learning to achieve the effect you want, and then you can continue to delve into other attributes.

What is a CSS Grid layout?

If you’re new to CSS, the Grid layout might seem a little weird to you. Do you know Flexbox?

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

Working with CSS layouts is often complex and tedious. The arrival of the Flexbox has brought new hope to web layouts, and the forthcoming adoption of the Grid will bring us more.

goal-directed

By the end of the text you can implement a responsive music application layout.

Part 1: 10% (1/2) —- Basic terms

The Grid container

In any application we’ve ever implemented or seen, visual presentation is essentially a matter of arranging and placing blocks of content within certain boundaries.

Simply put, a “grid” is a set of intersecting lines (horizontal and vertical) that map out a space where other elements can be located.

If you’ve ever used software like Adobe, Photoshop, Sketch, it’s easy to understand.

In the semantics of CSS Grid layouts, a Grid container is a vehicle that can hold all of the Grid’s children (the father of the Grid world).

Suppose you have a layout requirement, as shown below:



A layout is made up of a grid container and cells. The outermost and largest rectangle acts as the carrier of the entire layout, namely the grid container; The smaller rectangle is the cell.

Grid lines

Horizontal and vertical lines are used to divide grid containers.

Grid cell

A grid cell is the smallest cell in a grid layout. It is surrounded by four adjacent grid lines.

The grid area

The grid area occupies a minimum of one grid cell and a maximum of the entire grid container.

In the figure below, the area covered by four grid cells constitutes a grid area.

The grid orbit

I strongly dislike academic definitions. A grid track can be thought of as another fancy alias for a column or row. The space between any two grid lines.

To sum up, we are about halfway through the goal, so please keep reading.

Part 2: The last half

Now that you know the basic terminology, let’s play with it

Declare a grid

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

As an example, the div tag is used as a grid container:

div {
  display: grid;
}Copy the code

Declare rows and columns

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

So how do you use them? Very simple ~

Grid-template-columns declare columns and grid-template-rows declare rows.

You pass several values to an attribute, and rows or columns are divided accordingly. Such as:

grid-template-columns: 100px 200px 300pxCopy the code

The code above will divide the grid container into three columns, each 100px, 200px, and 300px wide

grid-template-rows: 100px 200px 300pxCopy the code

This code will divide the grid container into three lines, each 100px, 200px, 300px wide

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

grid-template-columns: 100px 200px 300px
grid-template-rows: 100px 200px 300pxCopy the code

Part 3: It’s time to write some code

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

Structuring HTML

As to why this is so, read on.

<body>
   <aside></aside>
   <main></main>
   <footer></footer>
</body>Copy the code

The body is the music container

body {
   display: grid;
   min-height: 100%
}Copy the code

The code above has turned the body into a grid container that continues to declare rows and columns.

Container planning

So how do we plan the rows and columns of the grid? Let’s review what the music APP looks like.

Ok, so we can probably divide the layout into two rows and two columns.

To think about the diagram above, there are a few things to note:

  1. The first column must be 50px wide
  2. The second column fills the remaining space

On line:

  1. The second line is fixed at 100px height
  2. The first row automatically fills the remaining height

Fortunately, the Grid layout provides a new unit that solves this problem. Fr A fractional unit. This unit solves the problem of automatically allocating surplus space.

If you need three columns of equal width,frThe units automatically distribute space evenly.



Don’t panic if you want to add more elements to your business, fr units will do it automatically.

Even more subtly, 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;
}Copy the code

If you still have questions about FR units, read the CSS Fractional Unit (FR) In Approachable, plain Language.

Use grid areas to place child elements

Now that we’ve declared a grid system, let’s go ahead and implement it. The purpose of this section is to learn how to use grid areas to lay out child elements. Recall that a grid area is an area divided by four grid lines.

Alas really don’t want to translate, directly give the code and explain it. Zoning takes advantage of another new feature, grid-template-Areas. Grid-template-areas provide a very see – and – see way to divide areas.

body {
      ...
      grid-template-areas: "sidebar  content"
                           "footer   footer";
}Copy the code

The above code means…

Let’s summarize all the code again: containers

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

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

code

Knowledge review

  1. Grid containers, grid cells, grid lines, grid regions, grid tracks
  2. Container attributedisplay: grid,grid-template-columns,grid-template-rows,grid-template-columns
  3. fractionfr
  4. Container attribute grid-area

Cssgridgarden practice factory

Translation, mixed with personal insights, please refer to the original. 🌚 front-end learning QQ group: 538631558 🌚

[Development environment recommendation]
Cloud StudioIs based on the browser integrated development environment, support most programming languages, including HTML5, PHP, Python, Java, Ruby, C/C++,.NET small programs, etc., no download installation program, one click switch development environment. Cloud Studio provides a complete Linux environment, and supports custom domain name pointing, dynamic computing resource adjustment, can complete the development, compilation and deployment of various applications.