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!
Dlaczego CSS grid jest lepszy?
By Agnes Wilk G
