Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
​
</head>
<body>
<div class="wrapper">
​
    <header class="mainheader">
      <h1>La révolution avec Grid <span>à comparer avec flex !</span></h1>
      <p>Excerpts from the W3C </p>
    </header>
​
    <div class="panel">
        <h4>Les références</h4>
        <ul>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Ajax">Ajax</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/angular">angular</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/animation">animation</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/array">array</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/article">article</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/book">book</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/bootstrap">bootstrap</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/bug">bug</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/canvas">canvas</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/closure">closure</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/CSS">CSS</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/date">date</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/DOM">DOM</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/DS">DS</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Editeur">Editeur</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/ES6">ES6</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Evt">Evt</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/examen">examen</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/file">file</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/flex">flex</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/fonction">fonction</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/fonction%20fl%C3%A9ch%C3%A9es">fonction fléchées</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/fx">fx</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Game">Game</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/gradient">gradient</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Grid">Grid</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/html">html</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/HTML5">HTML5</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/input">input</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/javascript">javascript</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/Jquery">Jquery</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/JS">JS</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/jsfiddle">jsfiddle</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/JSON">JSON</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/khan">khan</a>
</li>
<li>
<a dir="ltr" href="http://duponttd.blogspot.fr/search/label/lexical%20scoop">lexical scoop</a>
</li>
        </ul>
    </div>
​
    <div class="content">
        <h2>Examles </h2>
        <p>The following declares a grid with as many rows of at least 5em as will fit in the height of the grid container (100vh) and no explicit columns; instead columns are added as content is added. The resulting column widths are equalized. Since content overflowing to the right won’t print, an alternate layout for printing adds rows instead.
<ul>
     <li>
       The following declares a grid with four named areas: <code>H</code>, <code>A</code>, <code>B</code>,
                and <code>F</code>.
                The first column is sized to fit its contents,
                and the second column takes up the remaining space.
                Rows default to <a class="css" data-link-type="maybe" href="#valdef-grid-template-columns-auto" id="ref-for-valdef-grid-template-columns-auto-1">auto</a> (content-based) sizing; the last row is given a fixed size of 30px. 
<pre>main {
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}
</pre>
     </li><li>
       The following declares a grid with as many rows
                of at least 5em as will fit in the height of the grid container (<span class="css">100vh</span>)
                and no explicit columns;
                instead columns are added as content is added.
                The resulting column widths are equalized.
                Since content overflowing to the right won’t print,
                an alternate layout for printing adds rows instead. 
<pre>main {
  grid: repeat(auto-fill, 5em) / auto-flow 1fr;
  height: 100vh;
}
@media print {
  main {
    grid: auto-flow 1fr / repeat(auto-fill, 5em);
}
</pre>
     </li><li>
       The following declares a grid with 5 evenly-sized columns
                and three rows,
                with the middle row taking up all remaining space
                (and at least enough to fit its contents). 
<pre>main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}
</pre>
    </li></ul>
      </p>
​
        <p>The following declares a grid with four named areas: H, A, B, and F. The first column is sized to fit its contents, and the second column takes up the remaining space. Rows default to auto (content-based) sizing; the last row is given a fixed size of 30px.
main {
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}</p>
      <p>The following declares a grid with 5 evenly-sized columns and three rows, with the middle row taking up all remaining space (and at least enough to fit its contents).
main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}</p>
    </div>
  <footer class="mainfooter">
      <p>The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to slots (grid areas) in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty slots using auto-placement. §9 Placing Grid Items.</p>
    </footer>
  </div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers