Вадим Макеев

  • Published on
    16-Apr-2017

  • View
    569

  • Download
    0

Embed Size (px)

Transcript

  • .

    M. C

    . Esc

    her,

    Rela

    tivity

    http://www.mcescher.com/gallery/back-in-holland/relativity/

  • 2

  • Template Layout

    4

    https://www.w3.org/TR/2005/WD-css3-layout-20051215/

  • Grid Layout

    5

    https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/

  • 6

  • Opera: opera://flags/#enable-experimental-web-platform-features

    Chrome: chrome://flags/#enable-experimental-web-platform-features

    Firefox: about:config layout.css.grid.enabled

    10

    opera://flags/#enable-experimental-web-platform-featureschrome://flags/#enable-experimental-web-platform-featuresabout:config

  • 11

  • 13

  • 15

  • 18

  • 20

  • grid container -

    grid item -

    grid track -

    grid cell -

    grid line -

    grid area -

    .

    22

    https://github.com/web-standards-ru/dictionary/blob/master/dictionary.md#grid-layout

  • 23

  • sample

    sample__item

    sample__item

    sample__item

    sample__item

    sample__item

    01.

    02.

    03.

    04.

    05.

    06.

    07.

    24

  • #0175A7

    :first-child #090

    :last-child #C00

    ::before counter(list)

    .sample { /* */ }

    .sample__item {

    background: ;

    }

    .sample__item { background: }

    .sample__item { background: }

    .sample__item { content: }

    01.

    02.

    03.

    04.

    05.

    06.

    07.

    25

  • 1

    2

  • display: grid;

    .sample {

    }

    01.

    02.

    03.

    27

  • 1

    2

  • 29

  • .sample

    1fr 1fr

    {

    grid-template-columns: ;

    }

    01.

    02.

    03.

    30

  • 1 2

  • 1 2

    3

  • 1 2

    3 4

  • 1 2

    3 4

    5

  • 1 2

    3 4

    5 6

  • .sample

    1fr 1fr 1fr

    {

    grid-template-columns: ;

    }

    01.

    02.

    03.

    36

  • 1 2 3

  • 1fr 1

    38

  • --

    39

  • .sample

    1fr 2fr 3fr

    {

    grid-template-columns: ;

    }

    01.

    02.

    03.

    40

  • 1 2 3

  • .sample

    250px 1fr 250px

    {

    grid-template-columns: ;

    }

    01.

    02.

    03.

    42

  • 1 2 3

  • 44

  • .sample

    columns 1fr

    rows 1fr

    {

    grid-template- : 150px 150px;

    grid-template- : 150px 150px;

    }

    01.

    02.

    03.

    04.

    45

  • 1 2 3

    4 5 6

    7 8 9

  • 47

  • .sample

    1fr 1fr 1fr

    {

    grid-template-columns: ;

    }

    01.

    02.

    03.

    49

  • 1 2 3

    4 5

  • .sample

    1 / 4

    .sample

    1 / 4

    :nth-child(1) {

    grid-column: ;

    }

    :nth-child(5) {

    grid-column: ;

    }

    01.

    02.

    03.

    04.

    05.

    06.

    51

  • 1

    2 3 4

    5

  • .sample

    3 / 4

    .sample

    1 / 2

    :nth-child(1) {

    grid-row: ;

    }

    :nth-child(5) {

    grid-row: ;

    }

    01.

    02.

    03.

    04.

    05.

    06.

    53

  • .sample

    3 / 1 / 4 / 4

    .sample

    1 / 1 / 2 / 4

    :nth-child(1) {

    grid-area: ;

    }

    :nth-child(5) {

    grid-area: ;

    }

    01.

    02.

    03.

    04.

    05.

    06.

    54

  • 1

    2 3 4

    5

  • ASCII

    !

    56

    https://www.instagram.com/p/7SsF55szuh/

  • 1

    2

    3

    4

    5

  • .sample

    'a a a a'

    c c

    'e e e e'

    ASCII {

    grid-template-areas:

    'b d' /* */

    ;

    }

    01.

    02.

    03.

    04.

    05.

    06.

    58

  • 1 a

    2 b

    3 c

    4 d

    5 e

    A B C D E.sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    01.

    02.

    03.

    04.

    05.

    59

  • 1

    2 3 4

    5

  • 1 b

    2 a

    3 e

    4 c

    5 d

    B A E C D.sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    .sample :nth-child() { grid-area: }

    01.

    02.

    03.

    04.

    05.

    61

  • 1

    2

    3

    4

    5

  • .sample

    'b c c d'

    ASCII {

    grid-template-areas:

    'a a a a'

    'e e e e';

    }

    01.

    02.

    03.

    04.

    05.

    06.

    63

  • .sample

    'b c c d'

    'b c c d'

    ASCII {

    grid-template-areas:

    'a a a a'

    'e e e e';

    }

    01.

    02.

    03.

    04.

    05.

    06.

    07.

    64

  • 1

    2 3 4

    5

  • 1

    2 3 4

    5

  • .sample {

    grid-template-areas:

    ' '

    ' '

    ' ';

    }

    01.

    02.

    03.

    04.

    05.

    06.

    67

  • ? ,

    , ,

    , .

    , www-style

    68

    https://lists.w3.org/Archives/Public/www-style/2013May/0114.html

  • ? ! CSS Live

    Grid by Example

    CSS Grid Layout Examples

    A Complete Guide to Grid

    CSS Grid Polyfill

    69

    http://css-live.ru/tag/css3-grid-layouthttp://gridbyexample.com/http://igalia.github.io/css-grid-layout/http://chris.house/blog/a-complete-guide-css-grid-layout/https://github.com/FremyCompany/css-grid-polyfill

  • sokr.me/grl

    70

    http://sokr.me/grl

  • @pepelsbey

    71

    http://twitter.com/pepelsbey

  • Shower

    72

    http://shwr.me/

  • ?

    73