1349284 - An example in the CSS grid demo shows incorrect CSS

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Ben Morris]

The problem is with the 3rd "Place & Align" example (#demo-two.example-3) at https://www.mozilla.org/en-US/developer/css-grid/.

The code box under the demo contains the following CSS:

.item-1 {
    grid-area: a;
    align-self: end;
}

.item-2 {
    grid-area: b;
    align-self: start;
}

but this is substantially different from the CSS actually used in the demo:

#demo-two.example-3 .item-1{grid-area:a;align-self:start}#demo-two.example-3 .item-2{grid-area:b;align-self:end}

That is, the values of align-self have been reversed (start-to-end and end-to-start). This error is repeated for items 3 and 4, and overall makes the example a bit confusing.

Comment 1

[Ben Morris]

My apologies for the incorrect category - I should have double-checked that.

Comment 2

[Craig Cook (:craigcook)]

Thanks for the report, sorry we missed this. I'll get it fixed ASAP.

Comment 3

[Craig Cook (:craigcook)]

Attachment: Github pull request https://github.com/mozilla/bedrock/pull/4733

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/db0cbeaf6604f4adfd479742dd556d2ea0e37992
[fix bug 1349284] Show correct CSS for grid example

https://github.com/mozilla/bedrock/commit/4b867293e45530c3ea920c1bdc1c2bd0c4666cd4
Merge pull request #4733 from craigcook/bug-1349284-grid-demo-code

[fix bug 1349284] Show correct CSS for grid example