Author: Liu Guanyu, senior front end engineer and technical manager of 360 Qi Dance Group, has participated in many large front end projects such as 360 Navigation, 360 Film, 360 finance and 360 games. A member of the W3C CSS Working Group who focuses on the latest developments in W3C standards, IOT, artificial intelligence and machine learning.
Ten years of sharpening a sword, frost blade never tried. Who is wrong with shijun today? — Don Jadao, Swordsman
The game situation
Grid Garden1 is an educational and fun online web game created by Codepip2 with 28 levels. Players can master the latest CSS standard CSS Grid through the way of passing.
The setting of the game is a garden planting carrot scene, players by filling in the code area CSS Grid related code to complete weeding, watering and other tasks. Through the hard work of the players, we can eat pure natural and pollution-free carrots.
When we opened the game, we found that there were multilingual versions of the game. You can switch between languages at the bottom left. In fact, I am so confident in my English that I did not hesitate to switch to the Simplified Chinese version.
In addition to the code area and mission area, players can choose any of the 28 levels in the selection area to challenge; When the player types code in the code area, the tasks and results pane on the right displays the results based on the code in real time. If the code completes the task, click the submit button and enter the next level. If the player completes the task, the special effects will be displayed. If the code does not complete the task, the submit button grays out. There will be an error effect in the code area for players to appreciate if they are hard to play 🙁
Beyond the game itself, the goal is to deepen the player’s understanding of the CSS Grid. Speaking of THE CSS Grid, this is a powerful way to layout Web pages. The proper use of CSS Grid can efficiently solve many common layout problems, and elegant, concise. For a complete CSS Grid property reference, see 3 here. Since the CSS Grid standard is still in the CR phase, if you are a fan of the latest standards, you can also follow the CSS working group on the latest progress of CSS Grid 4.
However, the major browsers now have varying degrees of support, as shown in the chart below:
Speaking of which, everyone can’t wait to try their hand in the game, so no more words, Let’s Go.
Pass: a memoir
Play with grid items
For those of you who have never touched the CSS Grid at all, you may feel a little overwhelmed at first. Let’s just say the first few passes are teaching. In general, the teaching level of a game involves a character jumping around on the screen and rambling along to popularize concepts and actions. So the author now to play this character.
- CSS Grid elements fall into two main categories:
Grid containersandThe grid item.Grid containersIs the parent element,The grid itemStudent: Child element. - for
Grid containersandThe grid itemEach has a different attribute modifier. - Declaring the Grid layout to do is in
Grid containersSpecified in the CSS codedisplay: grid;,display: inline-grid;ordisplay: subgrid; Grid linesThe boundary line that constitutes the grid structure is the reference for locating grid items. This is the rowrowAnd columncolumnThe location of the first grid line. In other words, for a grid with five columns per row, it has a total of six in each rowGrid lines. If this is not clear, you may need to review the tree planting question 🙁
The grid orbit
Grid lines
With this knowledge we can begin our journey.
Level 1 to level 11 is mainly for grid item properties grid-column-start and grid-column-end expansion, quite simple, I believe players will be able to complete quickly.
The following is a brief summary of levels 1-11:
grid-column-startandgrid-column-endActing on theThe grid item.- The above values can be used in combination to solve cross-row, cross-column problems.
grid-column-startandgrid-column-endIn, start is not necessarily less than end, and reverse is allowed.- You can set a negative value, which means from the last one
Grid linesI’m going to start with. - In addition to taking values, it can be used
spanThe keyword. Format isspan <number>It means how manyThe grid orbit - You can use
grid-column: <start>/<end>In short,spanThis abbreviation applies to the keyword.
What can go wrong is that when you set the value, you specify the order of grid lines rather than the order of grid tracks, especially if it’s negative, and the number following span is the number of grid tracks. It’s easy to keep that in mind.
Level 12 and level 13 show the ability of CSS Grid to set up rows. Setting up two-dimensional space is one aspect of Grid layout that is more extensive than Flex layout.
These two levels are also relatively easy.
Starting with level 14, we begin to combine row and column properties. Levels 14 and 15 require flexible use of the above keywords. In the specification, you can also name tracks, which we haven’t encountered yet, so let’s not use the “naming” tool.
Grid-area accepts four values separated by / : Grid-row-start, grid-column-start, grid-row-end, grid-column-end.
Level 17 tells us that overlapping coverage does not affect the calculation mechanism.
Still very simple, pass.
In view of the overlap of level 17, attribute keyword: ORDER is introduced in level 18-19. Order is similar to Z-index, indicating the stacking order. The larger the value is, the higher the value is. Negative numbers are allowed.
It’s easy, isn’t it?
Play with the grid container
Above we “a wave of operation like a tiger” grid items, let’s see, for the grid container operation, can “sweep the thousand I decide”.
Grid-template-columns and grid-template-rows are the attributes of the grid container.
The following is a brief summary of levels 20-22:
grid-template-columnsandgrid-template-rowsRow used to set the Grid layoutThe grid orbitThe size of the- The repeat function can simplify multiple identical values in the format
repeat(N, value), where N is a number and value is a value. Repeat can be used with other values, such as:grid-template-columns: repeat(N-1, value) value - When defining the above attributes, a mix of length units is allowed.
Level 23-25 mainly explains the use of the keyword FR.
Let’s summarize levels 23-25 below:
frIs the English word for “score”fractionThe shorthand.frUsed for equalizing and equalizing the remaining space of the grid container. thenfrHow is the space allocated? Let’s take three examples: A, B, and CThe grid orbit, theirgrid-template-columnsThe Settings are in order1fr,2frand3fr. So they divide A row into 6 equal parts, and the space of A, B, and C gets 1/6, 2/6, and 3/6 of that row, respectively.frCan be mixed with other units, e.ggrid-template-columns: 1fr 50px 1fr 1fr;. Just remember one thing: exceptautoIn addition, all fixed values (including percentages) are calculated before the rest of the space is calculatedfr.
Grid-template-rows is similar to grid-template-columns in level 26. Leave it to the player to try.
Grid-template-columns and grid-template-rows are used to form columns. Grid-template-rows is used to form columns. Grid-template-rows is used to form columns
After hundreds of twists and turns, we finally came to the bottom of the guan, let’s have a look at the big BOSS:
WTF? Can you only write one line of code? Think about it: grid-template is the simplest, with a/separated first column. First to solve the line: need to give 50px first, 100% to the flowers. The column scenario is a typical FR usage scenario, with weeds taking up 1/5 of the space and carrots taking up 4/5.
Grid-template: 1fr 50px/ 1FR 4fr;
Bingo! Congratulations, customs clearance success!
conclusion
Yes, we’ve seen the CSS Grid as fast as we can. However, for the entire CSS Grid we have only done the most common display, more fun practices, but also waiting for you to discover, and the evolution of the standard.
Text links in
- cssgridgarden.com/
- codepip.com/
- Developer.mozilla.org/zh-CN/docs/…
- drafts.csswg.org/css-grid/
Related articles
- You don’t know CSS Grid layout
- Mid-2017 summary – A review of the big front End events
- The day is coming when CSS can be written directly into nesting without precompilation
Thank you
Thank teacher Li Songfeng, Gao Feng and Liu Bowen for their pertinent comments on the revision of this paper. Designer Wang Xuan meimei helped to design the beautiful pictures. I would like to express my sincere thanks.
About Weird Dance Weekly
Qiwu Weekly is a front-end technology community operated by qiwu Group, a professional front-end team of 360 Company. After paying attention to the public number, directly send the link to the background can contribute to us.
