CSS Grid Basic

grid container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo1-container{
    /*За да направите HTML елемент да се държи като мрежов контейнер, 
        трябва да настроите свойството на display на grid  или inline-grid
        container е външният div в който ще се раполагат колоните.*/
    display: grid;
    /*Броят на колоните се дефинират с grid-template-columns, 
        а за редовете съответно grid-template-rows*/
    grid-template-columns: auto auto auto auto;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
}
------------------------------------------------------------------------
<div class="demo1-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>  
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
</div>

същият резултат, но с използване на repeat()


.demo2-container{
    display: grid;
    grid-template-columns: repeat(4,auto);
    /*grid-template-columns: repeat(4,1fr);*/
}

Колони с фиксирана широчина и редове с фиксирана височина.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo3-container{
    display: grid;
    grid-template-columns: 180px 1fr 180px 50px;
    /*тук широчината на колоните е фиксирана освен на колона 2, 
        която ще запълва цялото оставащо пространство*/
    grid-template-rows: 50px 200px;
}

min & max

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
Aenean commodo ligula eget dolor. Aenean massa.<br>
Cum sociis natoque penatibus et magnis dis parturient montes, <br>
nascetur ridiculus mus.
5
6
7
8
9
10
11
12
13
14
15
16

.demo4-container{
    display: grid;
    grid-template-columns: min-content 150px 150px max-content;
    /*min-content - ширината на колоната е равна на най-дългата дума.
        max-content - разпъва колоната по зялата дължина на текста*/
    height: 100vh;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
5
6
7
8
9
10
11
12
13
14
15
16

.demo4-container{
    display: grid;
    grid-template-columns: 200px 200px 200px minmax(200px,1fr);
    /*минимална широчина на колоната е 200px, 
        но ако контеинерът е по широк ще заема цялото свободно пространство.*/
    min-width:800px;
}

подравнаване

justify-content - Общата ширината на клетките в реда трябва да е по малка от ширината на контеинера, за да се наблюдава някакъв ефект

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo6-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo7-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo8-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo9-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo10-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: start;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo11-container{
    display: grid;
    grid-template-columns: repeat(4,30px);
    justify-content: end;
}

align-content - Общата височина на клетките в колоната трябва да е по малка от височина на контеинера, за да се наблюдава някакъв ефект

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo12-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo13-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo14-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo15-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo16-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: start;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo17-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 300px;
    align-content: end;
}

grid-gap, grid-column-gap, grid-row-gap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo18-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    /*С grid-gap се задава растоянието между елементите
        С grid-column-gap се задава растоянието между колоните
        С grid-row-gap се задава растоянието между редовете*/
    padding: 10px;
    /*на контеинера трябва да зададете padding, 
        за да не са долепени елементите до стените на контеинера.*/
}

grid-auto-flow

1
2
3
4
5
6
7
8
9
10
11
12
13

.demo19-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-auto-flow: row;/*default*/
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

.demo20-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-auto-flow: column;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
}
1
2
3
4
5
8
9
6
7
10
11
12
13

.demo21-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-auto-flow: row;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
}
.demo21-item2,.demo21-item3{
    grid-column: span 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

.demo22-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-auto-flow: row dense;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
}
.demo22-item2,.demo22-item3{
    grid-column: span 2;
}
1
2
3
4
5
6
7

.demo23-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(3, 100px);
}
1
2
3
4
5
6
7

.demo24-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4
5
6
7

.demo25-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(auto-fill, minmax(100px,auto));
}
1
2
3

.demo26-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(auto-fill, minmax(100px,auto));
}
1
2
3

.demo27-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(auto-fit, minmax(100px,auto));
}
1
2
3
4
5
6
7

.demo27-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    height:100vh;
    grid-template-columns: repeat(auto-fit, minmax(100px,auto));
}

grid item

grid-column

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo28-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    padding: 10px;
}
.demo28-item2{
    grid-column:2/5;/* start row line / end row line */
    /*Обърнете внимание всички елементи се изместват с бпоя на колоните заети от елемент 2 
        което отваря един нов ред и сега вече имаме 5 реда и 6 row line*/
}

.demo28-item3{
    grid-column: 1/span 3;/* start row line / end row line */
    /*тук не оказваме номера на линията,
        а колоната и колко на брой колони да се обединят*/
}

grid-row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo28-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    padding: 10px;
}
.demo28-item5{grid-row:3/7;}
.demo28-item7{grid-row:3/span 5;}

order

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo29-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    padding: 10px;
}
.demo29-item2{order:1;}
.demo29-item14{order:-1;}

grid area

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.demo30-container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    padding: 10px;
}
.demo30-item8{
    grid-area: 1 / 2 / 8 / 5;}
    /* grid-area: start row line / start column line / end row line / end column line; */
}

Naming grid area

1
2
3
4
5

.demo31-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    grid-template-areas:
        'header header header header header header'
        'left content content content right right'
        'left footer footer footer footer footer';
}
.demo31-item1 { grid-area: header; }
.demo31-item2 { grid-area: left; }
.demo31-item3 { grid-area: content; }
.demo31-item4 { grid-area: right; }
.demo31-item5 { grid-area: footer; }

nested grid

1
2
1
2
3
4
5
4
5
6

.demo32-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    grid-template-columns: 180px 1fr 180px;
}
[class*="demo32-item1"],[class*="demo32-item5"],[class*="demo32-item6"]{
    grid-column: 1 / span 3;
}
[class*="item"]>[class*="item"]{
    background-color: #eedd11;
}
<div class="demo32-container">
    <div class="demo32-item1">1</div>
    <div class="demo32-item2">2</div>
    <div class="demo32-item3 demo32-container">
            <div class="demo32-item1">1</div>
            <div class="demo32-item2">2</div>
            <div class="demo32-item3">3</div>  
            <div class="demo32-item4">4</div>
            <div class="demo32-item5">5</div>
    </div>
    <div class="demo32-item4">4</div>
    <div class="demo32-item5">5</div>
    <div class="demo32-item6">6</div>
</div>

example leyout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.demo33-container{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    min-width: 620px;
    grid-template-columns: repeat(6, 1fr);
}
[class*="demo33-item"]{
    min-height: 200px;
}
.demo33-item1{grid-column:1/3;}
.demo33-item2{grid-column:3/5;grid-row:1/3;}
.demo33-item3{grid-column: 5/6;grid-row: 1/3;}
.demo33-item9{grid-column: 2/4;}
.demo33-item10{grid-column: 4/6;}
.demo33-item12{grid-column: 1/2;grid-row: 4/6;}
.demo33-item14{ grid-column: 3/5;}
.demo33-item18{grid-column: 3/7;}
/*
.demo33-item1{grid-column:span 2;}
.demo33-item2{grid-column:span 2;grid-row:span 2;}
.demo33-item3{grid-row: span 2;}
.demo33-item9{grid-column: span 2;}
.demo33-item10{grid-column: span 2;}
.demo33-item12{grid-row: span 2;}
.demo33-item14{ grid-column: span 2;}
.demo33-item18{grid-column: span 4;}
*/