Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

CSS Grid

92 vues

Publié le

An overview of CSS Grid.

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

CSS Grid

  1. 1. CSS Grid T A B L E L A Y O U T 2 . 0
  2. 2. 2
  3. 3. 3 Table Layout Grid Frameworks
  4. 4. 4 CSS Grid
  5. 5. Grid Terminology 5
  6. 6. 6 Grid Container Grid Item Grid Item Grid Item Grid Item Grid Item Grid Item
  7. 7. 7 Grid Line Grid Track Grid Cell Grid Area
  8. 8. Grid Container Props 8
  9. 9. 9 display: grid;
  10. 10. 1 0 grid-template-rows / grid-template-columns Defines the columns and rows of the grid with a space separated list of value. Values represent track size and can be a px length, percentage, or fraction of free space. Optional names can be given to the generated lines. grid-template-columns: 40px 50px 1fr 2fr; grid-column-gap / grid-row-gap Defines the space between grid tracks. grid-column-gap: 10px; grid-row-gap: 15px; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; Repeat and minmax functions can also be used for more complex layouts. grid-template-rows: repeat(4, minmax(20px, 50px) 100px);
  11. 11. 1 1 justify-items / align-items Justify-items aligns a grid items on the row axis, align-items aligns items on the column axis, inside grid cells. Values can be start, end, center, or stretch (default). justify-self: start; justify-self: center; align-self: end; align-self: stretch; justify-content / align-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. Justify-content will align the grid on the row axis and align-content will align the grid on the column axis. Values can be start, end, center, stretch, space-around, space-between, space-evenly. justify-content: start; justify-content: center; align-content: space-around; align-content: space-evenly;
  12. 12. Grid Item Props 1 2
  13. 13. 1 3 grid-column-start / grid-column-end / grid-row-start / grid-row-end Determines a grid item’s location within the grid by referring to specific grid lines. Value can be a number or name referring to a grid line, “span <number | name>” to span until specified line is hit, or auto. grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 justify-self / align-self Justify-self aligns a grid item on the row axis, align-self aligns on the column axis. Values can be start, end, center, or stretch (default). justify-self: start; justify-self: center; align-self: end; align-self: stretch;
  14. 14. Grid Auto Flow 1 4
  15. 15. 1 5 grid-auto-flow If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works. It’s similar to flex-direction but with one special super power. grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense;
  16. 16. Grid Areas 1 6
  17. 17. 1 7 grid-template-areas / grid-area Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid. .item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }
  18. 18. 1 8
  19. 19. 1 9 .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }
  20. 20. 2 0 .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; } <div class="container"> <header class="header">Header</header> <main class="main">Main</main> <aside class="sidebar">Sidebar</aside> <footer class="footer">Footer</footer> </div>
  21. 21. 2 1 Table Layout Grid Frameworks CSS Grid
  22. 22. Responsive 2 2
  23. 23. 2 3
  24. 24. 2 4 .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 30px; max-width: 960px; margin: 0 auto 30px; }
  25. 25. 2 5 .container { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "header header" "main main” “sidebar footer”; @media (——medium-screen) { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; } }
  26. 26. Animation 2 6
  27. 27. 2 7
  28. 28. But what about Flex? 2 8
  29. 29. 2 9 “The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).” — Chris Coyier
  30. 30. 3 0 • Flex is one dimensional. Grid is two dimensional. • A core difference is that Grid’s approach is layout- first while Flexbox’ approach is content-first. • If you want to define a layout as a row or a column, that flexes based on the content inside, then you probably need flexbox. • If you want to define a grid and fit content into it in two dimensions  then  you probably need grid.
  31. 31. But what about Table? 3 1
  32. 32. 3 2 Still use tables …but for tables
  33. 33. 3 3 Demo time… CODEPEN

×