/Course-Css-Flexbox-Grid

And this repository, i will be uploading summary of course Css advanced with Flexbox and css grid.

Primary LanguageCSS

Course of CSS advanced, learning FLexbox, and CSS grid

And this repository, i will be uploading summary of course Css advanced with Flexbox and css grid.

Projects with CSS FLEXBOX

First project | Cards for blog with Flexbox

Cards

Second project | Menus with Flexbox

Menus

Third project | Website e-learning, with flexbox, Gulp, and Sass

Universidad

Fourth project | Blog of trips with Flexbox

TravelBlog

Fiveth project | Holy grail with Flexbox

holyGrail

Sixth project | Coments with Flexbox

Coments

Seventh project | Center text, and vertical with Flexbox

Center

Eighth project | Mansory style with Flexbox

mansory

Nineth project | Footer fixed with flexbox

Admin

Tenth project | Dashboard with Flexbox

Admin

Css Grid

What is CSS GRID? is a system of 2 dimention, Grid is a new form of create layouts, nothing framework you would has control on laouts you create.

CSS FLEXBOX is one dimention CSS GRID is two dimention

example

You can use FLEXBOX and GRID together

Important concepts

-Grid lines example

-Grid Row example

-Grid Column example

-Grid track example example Important If you define Grid axis row you had Grid track row.

-Grid Cell example Similar a table of HTML

-Grid area example A area can has several cells, when you agroup the cell you will have area

Basics of Grid

Container

display: grid;
grid-template-columsn: 50% 25% 25%;
grid-tamplate-rows: 25% 25% 25% 25%;

Sons

-- grid-column: 1 / 2; -- grid-row: 1 / 5;

Auto

  • grid-auto-flow: dense; column; row; // row es el default

Shorthand

  • grid: row row / column column;
grid: 50% 50% / 33% 33% 33%

Grid area

- grid-row: 1 / 3;
- grid-column: 1 / 3;
  • Shorthand for grid-row and grid-column:
grid-area: 1 / 1 / 3 / 3;

Repeat

grid-template-columns: 50% repeat(2, 25%);
grid: repeat(2, 50%) / repeat(3, 33%);

Grid template area

 /*
    template area
    le pasas el nombre:
    */
    grid-template-areas: 
        "header header header header"
        "principal principal principal sidebar"
        "footer footer footer footer"

No es bueno usar margin con los template, se recomienda usar:

grid-gap: 1rem;
grid-column-gap: 100px;
grid-row-gap: 100px;

Fraction in css Grid

grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr 1fr;

Primero siempre sera row row, luego column column

grid: repeat(2, 1fr) / repeat(3, 1fr);

Align in css grid

/*Vertical*/

/*UP vertical*/
align-items: start;
/*Horizontal*/
justify-content: center;
/*center horizontal*/

/*Space bettween*/
justify-content: space-between;

Experimental Design

.contenedor{
        grid-template-areas: 
            "header header header header"
            "izquierda nav nav nav"
            "izquierda contenido contenido derecha"
            "izquierda contenido contenido derecha"
            "footer footer footer derecha";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 80px 80px auto auto 80px; 
        grid-gap: 1rem;
    }

example

First project with Css GRID

blog