Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
developpement:css:css_grid [2020/01/19 17:02]
JC [Autofit + MinMax()]
developpement:css:css_grid [2020/01/20 22:57] (Version actuelle)
JC [Autofit + MinMax() = responsive]
Ligne 520: Ligne 520:
 Résolution **513**: Résolution **513**:
 {{ :​developpement:​css:​css-grid-auto-fit_minimax-513.png?​nolink |}} {{ :​developpement:​css:​css-grid-auto-fit_minimax-513.png?​nolink |}}
 +
 +===== Exemple simple: Blog =====
 +Il s'agit de positionner les éléments (div) comme une page de blog avec un header, bar de navigation, contenu et footer. \\
 +Coté **HTML**:
 +<file html>
 +<​!DOCTYPE html>
 +<html lang="​fr"​ dir="​ltr">​
 +    <​head>​
 +        <meta charset="​utf-8">​
 +        <link rel="​stylesheet"​ href="​style.css">​
 +        <​title>​Blog CSS Grid</​title>​
 +    </​head>​
 +    <​body>​
 +        <div class="​container">​
 +            <div class="​cell header">​Header</​div>​
 +            <div class="​cell side">​SideBar</​div>​
 +            <div class="​cell box">​Box 1</​div>​
 +            <div class="​cell box">​Box 2</​div>​
 +            <div class="​cell box">​Box 3</​div>​
 +            <div class="​cell main">​Main content</​div>​
 +            <div class="​cell footer">​Footer</​div>​
 +        </​div>​
 +    </​body>​
 +</​html>​
 +</​file>​
 +Coté **CSS**:
 +<file css>
 +html {
 +    box-sizing: border-box;
 +    font-size: 62.5%;
 +}
 +body {
 +    background-color:​ #b0b0b0;
 +}
 +.container {
 +    font-size: 1.5rem;
 +    font-family:​ "sans serif";​
 +    width: 70%;
 +    margin: 30px auto;
 +    display: grid;
 +    grid-gap: 15px;
 +    grid-template-rows: ​    ​[header-start]50px
 +                            [header-end box-start]100px
 +                            [box-end main-start]300px
 +                            [main-end footer-start]50px
 +                            [footer-end];​
 +    grid-template-columns: ​ [side-start]120px
 +                            [side-end box1-start]1fr
 +                            [box1-end box2-start]1fr
 +                            [box2-end box3-start]1fr
 +                            [box3-end];
 +}
 +.cell {
 +    background-color:​ red;
 +    color: white;
 +    padding-top:​ 10px;
 +    padding-left:​ 10px;
 +}
 +.header {
 +    grid-column:​ side-start / box3-end;
 +}
 +.side {
 +    grid-row: box-start / main-end;
 +}
 +.box {
 +    height: 100px;
 +}
 +.main {
 +    grid-column:​ box1-start / box3-end;
 +}
 +.footer {
 +    grid-column:​ side-start / box3-end;
 +}
 +</​file>​
 +{{ :​developpement:​css:​blog-css-grid.png?​nolink |}}