Dlaczego CSS grid jest lepszy?

Agnieszka Grabałowska

specjalista od zarządzania frustracją użytkowników

Czego używamy?

Bootstrap
Floats
Flexbox

Bootstrap

<div class="container">


  <div class="row">
    <div class="col-sm-12">1</div>
  </div>

  <div class="row">
    <div class="col-sm-12 col-md-4">2a</div>
    <div class="col-sm-12 col-md-4">2b</div>
    <div class="col-sm-12 col-md-4">2c</div>
  </div>

  <div class="row">
    <div class="col-sm-6">3a</div>
    <div class="col-sm-6">3b</div>
  </div>

  <div class="row">
    <div class="col-sm-12">4</div>
  </div>

</div>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-6"><div class="well">1</div></div>
                        <div class="col-md-6"><div class="well">2</div></div>
                    </div><!-- end of row -->
                </div>
                <div class="col-md-6"><div class="well">2</div></div>
            </div><!-- end of row -->
            <div class="row">
                <div class="col-md-6"><div class="well">3</div></div>
                <div class="col-md-6"><div class="well">4</div></div>
            </div><!-- end of row -->
            <div class="row">
                <div class="col-md-12"><div class="well">8</div></div>
            </div><!-- end of row -->
        </div><!-- end of col-md-4 -->
        <div class="col-md-8"><div class="well results">results</div></div>
    </div><!-- end of row -->
    <div class="row">
        <div class="col-md-4"><div class="well">6</div></div>
        <div class="col-md-4"><div class="well">6</div></div>
        <div class="col-md-4"><div class="well">6</div></div>
    </div><!-- end of row -->
</div>

Floating

<div class="clearfix">

    <div id="left">
      <p>float: left</p>
    </div>
    
    <div id="right">
      <p>float: right</p>
    </div>

</div>

<footer>
  <p>footer</p>
</footer>

#left {
  float: left;
  width: 50%;
}

#right {
    float: right;
    width: 40%;
}

Floating

<div class="clearfix">

    <div id="left">
      <p>float: left</p>
    </div>
    
    <div id="right">
      <p>float: right</p>
    </div>

</div>

<footer>
  <p>footer</p>
</footer>

#left {
  float: left;
  width: 50%;
}

#right {
    float: right;
    width: 40%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

*::after {
    content: "";
    clear: both;
    display: block;
}

Flexbox, yay!

<div class="container">

    <div id="left">
      <p>flex: left</p>
    </div>
    
    <div id="right">
      <p>flex: right</p>
    </div>

</div>

<footer>
  <p>footer</p>
</footer>

.container {
  display: flex;
  justify-content: space-between;
}

#left {
  width: 50%;
}

#right {
    width: 40%;
}

display: flex;

.container {
  display: flex; /* or inline-flex */

  flex-direction: row | row-reverse | column | column-reverse;

  flex-wrap: nowrap | wrap | wrap-reverse;

  justify-content: flex-start | flex-end | center | space-between 
                   | space-around | space-evenly;

  align-items: flex-start | flex-end | center | baseline | stretch;

  align-content: flex-start | flex-end | center | space-between 
                | space-around | stretch;
}

.item {
  order: <integer>; /* default is 0 */

  flex-grow: <number>; /* default 0 */

  flex-shrink: <number>; /* default 1 */

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Grid, yay! no.2

<div class="container">

    <div id="left">
      <p>left</p>
    </div>
    
    <div id="right">
      <p>right</p>
    </div>

</div>

<footer>
  <p>footer</p>
</footer>

.container {
  display: grid;
  grid-template-columns: 50% 40%;
  justify-content: space-between;
}

.container

.container {
  grid-template-columns: repeat(3, 20px) 5% auto;
  grid-template-rows: [h-start] 1fr [h-end c-start] 3fr [c-end f-start] 1fr [f-end];

[h-start]

[h-end c-start]

[c-end f-start]

[f-end ]

1 (-6)

2 (-5)

3 (-4)

4 (-3)

5 (-2)

6 (-1)

cell

area

.item

.container

.container {
  grid-template-rows: 1fr 600px 1fr;
  grid-template-columns: 1fr 1fr 200px;
  grid-gap: 40px;
}

.container

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

.item

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

.item {

grid-column: 1/3;

grid-row: 2/3;

}

.item-d {
  grid-area: 2 / 1 / 3 / 3;
}

.item

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

justify

align

grid area

.container {
  grid-template-rows: 1fr 600px 1fr;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-areas: 
    "header header header" 
    "content content sidebar"
    "footer footer footer";
}

mobile

web

@media screen and (min-width: 900px) {
    .container {
      grid-template-rows: 1fr 600px 1fr;
      grid-template-columns: 1fr 1fr 50px;
      grid-template-areas: 
        "footer footer content" 
        "footer footer header"
        "footer footer sidebar";
    }
}

.container {
  grid-template-rows: 1fr 600px 1fr;
  grid-template-columns: 1fr 1fr 50px;
  grid-template-areas: 
    "header header header" 
    "content content sidebar"
    "footer footer footer";
}

@media screen and (min-width: 900px) {
    .container {
      grid-template-rows: 1fr 600px 1fr;
      grid-template-columns: 1fr 1fr 50px;
      grid-template-areas: 
        "footer footer content" 
        "footer footer header"
        "footer footer sidebar";
    }
}

.container {
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  grid-template-areas: 
    "blue-sm-1 blue-sm-2 blue-sm-3      .           .      ." 
    "    .     blue-big  blue-big       .      yellow-sm-1 ."
    "    .     blue-big  blue-big  yellow-sm-1 yellow-sm-1 ."

}

Flexbox vs. CSS Grid?

agnieszka.grabalowska@gmail.com

Dzięki śliczne!