Con­tribut­ing to CSS

net magazine - - CSS GRID SECRETS -

You can get in­volved with the fu­ture di­rec­tion of CSS Grid Lay­out or any CSS spec­i­fi­ca­tion that you are in­ter­ested in. The work of the CSS Work­ing Group hap­pens in pub­lic, and most of it now on GitHub at

csswg-drafts/is­sues, where any­one can com­ment or raise is­sues. The is­sues listed on GitHub in­clude those raised by peo­ple work­ing on spec­i­fi­ca­tions and peo­ple work­ing on web browsers, but things are also raised by web de­vel­op­ers who are in­ter­ested in a spec.

If rais­ing a new is­sue about a fea­ture you would like to see, try to post the use case you have for the fea­ture and ex­plain the prob­lems it would solve. If it is some­thing you al­ready do with JavaScript for ex­am­ple, but you think would be bet­ter solved in na­tive CSS, ex­plain the so­lu­tion you cur­rently use. This will help every­one read­ing your is­sue to un­der­stand what you are try­ing to do; it may well en­cour­age other web de­vel­op­ers to post their sup­port for the fea­ture too. You can see ex­am­ples of this type of dis­cus­sion on the is­sue about Ma­sonry lay­out men­tioned in this ar­ti­cle.

It can take a while for things to hap­pen, es­pe­cially if you are sug­gest­ing fea­tures that will go into a new level of a spec­i­fi­ca­tion. Is­sues will be taken from GitHub and dis­cussed when that spec­i­fi­ca­tion is be­ing worked on. When they are dis­cussed, the IRC log of that meet­ing will be posted to the is­sue, so you can see what was de­cided and why.

or­der, how­ever, you could eas­ily make a lay­out very dif­fi­cult for some­one nav­i­gat­ing us­ing the key­board if they are tab­bing from item to item. Use this fea­ture with great care and test­ing! Magic lines and magic ar­eas When you use the Grid Tem­plate Ar­eas method of lay­ing out con­tent, you cre­ate a named area on your grid. This in turn cre­ates a set of named lines for rows and col­umns that use the area name with

-start and -end ap­pended. In this next ex­am­ple, I have used the named lines cre­ated by po­si­tion­ing my grid ar­eas to po­si­tion an over­lay. . grid { dis­play: grid; grid-tem­plate- col­umns: 1fr 2fr 1fr; grid- auto- rows: min­max(100px, auto); grid-tem­plate- ar­eas: "sd1 con­tent sd2" "sd1 footer sd2"; } . side1 { grid- area: sd1; } . side2 { grid- area: sd2; } . con­tent { grid- area: con­tent; } . footer { grid- area: footer; } . grid . over­lay { grid- col­umn: sd1- start / sd2- end; grid- row: con­tent- start / footer- end; } This works in re­verse when you use named grid lines. If you name lines end­ing with -start and -end for col­umns and rows, you will cre­ate a named area of the main name used.

When you use the Grid Tem­plate Ar­eas method of lay­ing out con­tent, you cre­ate a named area on your grid

An area de­fined by the lines con­tent-start and con­tent-end for rows and col­umns, would have the name con­tent. You could place an item into that area with grid-area: con­tent. De­fault align­ment When an item be­comes a grid item, the de­fault be­hav­iour is to stretch over its grid area; that is un­less the item is some­thing with an in­trin­sic as­pect ra­tio. If the item has an as­pect ra­tio, it will align to the start line in both the row and col­umn di­rec­tion. This means that Grid won’t stretch your im­ages out of pro­por­tion by de­fault, al­though you can of course do so if you want to by chang­ing the align­ment be­hav­iour. The spec­i­fi­ca­tion tells you how to cre­ate fall­backs Writ­ten into the CSS Grid spec­i­fi­ca­tion are the de­tails of how CSS Grid Lay­out over­rides other lay­out meth­ods. If you have an item that is floated, uses

dis­play: ta­ble or dis­play: in­line block and then be­comes a grid item, the spec­i­fi­ca­tion ex­plains what will hap­pen. In short, when an item be­comes a grid item, you will find: If it is floated, or uses the clear prop­erty, these prop­er­ties will cease to af­fect the item. If it has dis­play: in­line-block or uses a ta­ble prop­erty such as dis­play: ta­ble-cell these no longer ap­ply. In the case of ta­ble prop­er­ties, anony­mous boxes that are gen­er­ated when us­ing dis­play: ta­ble-cell with­out a par­ent ta­ble are no longer cre­ated.

ver­ti­cal-align no longer ap­plies.

I cre­ated a cheat­sheet that de­tails these over­rides with ex­am­ples. You can find that on my site at https://rache­landrew.­sheets/grid-fall­backs.

While re­ly­ing on this over­rid­ing be­hav­iour will work in many cases, you need to take care with widths set on items that later be­come grid items. In pre­vi­ous lay­out meth­ods, we con­trol the width of an item on the item.

With Grid, we place the item into a grid cell that con­strains it. This means that if you have an item with a per­cent­age width set, that width will re­solve to a per­cent­age of the grid area once the item be­comes a grid item.

The so­lu­tion for this is an­other CSS spec­i­fi­ca­tion: Fea­ture Queries. We can use a Fea­ture Query to test for Grid Lay­out sup­port. If the browser sup­ports Grid, I set the width to auto. . grid > div { float: left; width: 33.333%; } @ sup­ports (dis­play: grid) { . grid > div {

width: auto; } } Siz­ing with min-con­tent and max-con­tent The CSS In­trin­sic & Ex­trin­sic Siz­ing Mod­ule Level 3 spec­i­fi­ca­tion de­fines ad­di­tional key­words for siz­ing. These key­words in­clude min-con­tent and max

con­tent, which can be used to de­fine siz­ing in your grid tracks. As a very sim­ple ex­am­ple, I have cre­ated a two-col­umn track grid. One col­umn is de­fined as min-

The Grid spec­i­fi­ca­tion is at Can­di­date Rec­om­men­da­tion sta­tus, which means we hope to not make any ma­jor changes

con­tent size, the sec­ond col­umn max-con­tent. The first track is only as big as re­quired to dis­play a sin­gle word of the con­tent – this is the min­i­mum size that this track can be. The sec­ond ex­pands to al­low the whole row to dis­play, which you might find cause over­flows that you need to man­age and deal with. . grid { dis­play: grid; grid-tem­plate- col­umns: min- con­tent max­con­tent; } Is Grid Lay­out done? The Grid spec­i­fi­ca­tion is now at Can­di­date Rec­om­men­da­tion sta­tus, which means that we hope to not make any ma­jor changes to the spec; in­stead, it moves on to a phase where we look for at least two im­ple­men­ta­tions of each fea­ture. This en­sures that the spec­i­fi­ca­tion makes sense and can be im­ple­mented by browsers. Things are still hap­pen­ing for Grid, how­ever, and in the rest of this ar­ti­cle we will look at a re­cent change to the Level 1 spec­i­fi­ca­tion and a cou­ple of things that we might have to look for­ward to in Level 2. Gaps are chang­ing The grid-gap short­hand, plus the long­hand

grid-col­umn-gap and grid-row-gap prop­er­ties were changed dur­ing the August 2017 CSS Work­ing Group meet­ing to be­come gap,

col­umn-gap and row-gap. They have also been moved to have their def­i­ni­tions in the Box Align­ment spec­i­fi­ca­tion. This is the spec­i­fi­ca­tion that took the nice align­ment fea­tures from Flexbox and ex­panded out so they could also be used in Grid – and po­ten­tially other lay­out meth­ods too.

Putting the gap fea­tures into the Box Align­ment spec­i­fi­ca­tion and nam­ing them in a more generic way means that they can be used in other lay­out types where they make sense. The ob­vi­ous place where they make sense is in Flexbox. This re­nam­ing means we’ll ul­ti­mately get proper gaps in Flexbox; no more mess­ing around with mar­gins. Browsers will alias the old names to the new ones, so if you have al­ready used gaps in Grid Lay­out that code won’t break. How­ever, you might like to also add both prop­er­ties yourself; browsers ig­nore the one they don’t sup­port. Grid isn’t Ma­sonry When peo­ple first see the dense pack­ing mode that I demon­strated ear­lier in this ar­ti­cle, they of­ten think that Grid can do the Ma­sonry lay­out pat­tern. Ma­sonry, how­ever, is a com­pletely dif­fer­ent type of lay­out. A stan­dard Ma­sonry lay­out isn’t a strict grid, mak­ing this pat­tern sit some­where be­tween what Flexbox is

good at and what Grid does. At the CSS Work­ing Group, how­ever, we are think­ing about this is­sue. It’s some­thing that we know de­vel­op­ers re­ally want to be able to do. You can find the dis­cus­sion in the CSS WG drafts repos­i­tory over on GitHub (­wg­drafts/is­sues/945), and even add your thoughts too. Grid Area pseudo-el­e­ments An­other com­mon fea­ture re­quest for Grid Lay­out is the abil­ity to style the grid cells or ar­eas, with­out need­ing to in­sert an el­e­ment to style. Cur­rently, to add borders to an area you would need to add an empty el­e­ment to your markup or use gen­er­ated con­tent to cre­ate a grid item that can be styled.

There is an is­sue raised ( https://github.

com/w3c/csswg-drafts/is­sues/499) in re­la­tion to con­sid­er­ing adding some kind of pseudo-el­e­ment for grid ar­eas. This would con­se­quently give you some­thing to tar­get if you wanted to add back­grounds or borders to a par­tic­u­lar area with­out adding some ex­tra markup or us­ing gen­er­ated con­tent.

The CSS Work­ing Group repos­i­tory on GitHub is where you can read and post new is­sues re­lated to CSS spec­i­fi­ca­tions. Get in­volved!

Right This cheat­sheet ex­plains the way that an el­e­ment be­com­ing a grid item will over­ride other lay­out meth­ods to cre­ate fall­backs

Top The over­lay has been po­si­tioned on top of the grid ar­eas by us­ing named lines cre­ated from the area name Far left The min­con­tent col­umn is as wide as needed to dis­play one word; the max-con­tent col­umn ex­pands in or­der to fit the sen­tence Left The boxes are divs and stretch over the cell; the 150px im­age aligns to the start row and col­umn lines

Ragged rows A Ma­sonry lay­out is sim­i­lar to the lay­out of boxes on the Pin­ter­est site. Boxes ar­range them­selves in ragged rows

Cre­ate fall­backs Fea­ture Queries has great browser sup­port, and can be used to over­ride CSS used for old browsers in sup­port­ing browsers Chang­ing gaps Gaps are now de­tailed in the Box Align­ment spec­i­fi­ca­tion ( and ap­ply to other lay­out meth­ods in ad­di­tion to Grid

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.