ŚWIAT ZZA KRAT

CSS GRID

MACIEK KORSAN, BIAŁYSTOK 2017

Maciek Korsan

Frontend developer @ POLARBITS

Maciek @ Korsan Studio

Wykładowca @ Studia Podyplomowe WI PB

@maciejkorsan

CSS Grid layout has been designed to provide a two-dimensional layout method for CSS, with the ability to lay out items in rows and columns.

Flexible layout - 1D - tylko oś X (lub Y)

Grid layout - 2D - osie X i Y

header

menu

content

footer

 <center>
        <table width="1000px" border="0" cellpadding="0" cellspacing="0">
            <tr bgcolor="black">
                <td colspan="2">
                    <center> 
                        <br/><br/><font color="white">Header</font><br/><br/><br/>
                    </center>
                </td>
            </tr>
            <tr>
                <td width="25%" bgcolor="blue">
                    <center> 
                        <font color="white">Menu</font><br/> 
                    </center>
                </td>
                <td width="75%" bgcolor="green">
                    <center>
                        <font color="white">Content</font><br/>
                        <font color="white">Content</font><br/>
                        <font color="white">Content</font><br/>
                        <font color="white">Content</font><br/>
                    </center>
                </td>
            </tr>
            <tr>
                <td bgcolor="red" colspan="2">
                    <center>
                        <br/><font color="white">Footer</font><br/><br/>
                    </center>
                </td>
            </tr>
        </table>
 </center>

Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn’t have content structure, therefore enabling a wide variety of layouts not possible in tables.

display: grid;

.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}
    <div class="wrapper">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">c</div>
        <div class="box">d</div>
        <div class="box">e</div>
        <div class="box">f</div>
    </div>
.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}
    <div class="wrapper">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">c</div>
        <div class="box">d</div>
        <div class="box">e</div>
        <div class="box">f</div>
    </div>
.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}
    <div class="wrapper">
        <div class="box">a</div>
        <div class="box">b<br/><br/><br/></div>
        <div class="box">c</div>
        <div class="box">d</div>
        <div class="box">e</div>
        <div class="box">f</div>
    </div>

System współrzędnych

grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;

System współrzędnych - nakładanie się

grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

System współrzędnych - tetris?

grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
.wrapper { 
  display: grid;
  grid-template-columns: 100px 600px;
  grid-template-areas: "logo stats"
                       "score stats"
                       "board board"
                       "... controls";
} 
.logo { grid-area: logo; }
.score { grid-area: score; }
.stats { grid-area: stats; }
.board { grid-area: board; }
.controls { grid-area: controls; }
<div class="wrapper">
	  <div class="logo">logo</div>
	  <div class="score">score</div>
	  <div class="stats">stats</div>
	  <div class="board">board</div>
	  <div class="controls">controls</div>  
</div>

grid-area

można używać z @media!

.grid {
  display: grid;
  width: 750px;
  grid-template-columns: 150px 1fr 2fr;
}

Jednostka FR

Dzięki za uwagę!
 

@maciejkorsan

Świat zza krat

By Maciej Korsan

Loading comments...

More from Maciej Korsan