Scribd
Upload
26 views

CSS #3 Grid

The document discusses CSS Grid and its features for laying out content in grids. It covers grid template columns and rows, auto rows, gaps, grid lines, nested grids, alignment, responsive design, and more.

Uploaded by

TokoSerigala
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

CSS #3 Grid

The document discusses CSS Grid and its features for laying out content in grids. It covers grid template columns and rows, auto rows, gaps, grid lines, nested grids, alignment, responsive design, and more.

Uploaded by

TokoSerigala
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Front-End Development

Styling
With CSS
#3 CSS Grid
<body>
    <div id="content">
     <div class="kotak1">1</div>
     <div class="kotak2">2</div>
     <div class="kotak3">3</div>
     <div class="kotak4">4</div>
     <div class="kotak5">5</div>
     <div class="kotak6">6</div>
     <div class="kotak7">7</div>
     <div class="kotak8">8</div>
     <div class="kotak9">9</div>
    </div>
</body>
<head><style>
body{
color: white;
text-align: center;
}
#content{
max-width: 960px;
margin: 0 auto;
}
#content div{
background: lightskyblue;
padding: 30px;
}
#content div:nth-child(even){
background: grey;
}
</style></head>
Template Columns
Template
#content{ Columns
display: grid;
grid-template-columns: 30% 30% 30%;
max-width: 960px;
margin: 0 auto;
}

= = = = = Using Fraction: = = = = =
grid-template-columns: 1fr 2fr 1fr;

= = = = = Using Repeat: = = = = =
grid-template-columns: repeat(3, 1fr);
Template Rows
#content{
Template Rows
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px 300px;
max-width: 960px;
margin: 0 auto;
}

= = = = = Using Fraction: = = = = =
grid-template-rows: 1fr 2fr 1fr;

= = = = = Using Repeat: = = = = =
grid-template-rows: repeat(3, 1fr);
Auto Rows
Auto Rows
#content{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 150px;
max-width: 960px;
margin: 0 auto;
}

= = = = = Using MinMax: = = = = =
grid-auto-rows: minmax(100px, auto);
Grid Gap
Grid Gap
#content{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 3fr;
grid-column-gap: 20px;
  grid-row-gap: 10px;
max-width: 960px;
margin: 0 auto;
}

// grid-gap: 20px;
Grid Lines
Grid Column
    #content{ Grid Column
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;
    }
    .kotak1 {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .kotak2 {
        grid-column: 4 / 10;
    }
Grid Row
Grid Row
    #content{
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;
    }
    .kotak3 {
        grid-column: 1 / 5;
        grid-row: 2 / 4;
    }
Nested Grids
.kotak4 { Nested Grids
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.kotak4 p {
border: 2px solid white;
padding: 20px;
}
========================================
<div class="kotak4">
<p>A</p><p>B</p><p>C</p><p>D</p>
</div>
Align Items
Align Items
   #content{
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-auto-rows: 150px;
       max-width: 960px;
       margin: 0 auto;
       align-items: start;
   }

// align-items: stretch;
// align-items: end;
// align-items: center;
Justify Items
   #content{ Justify Items
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-auto-rows: 150px;
       max-width: 960px;
       margin: 0 auto;
       align-items: start;
justify-items: start;
   }
// justify-items: stretch;
// justify-items: end;
// justify-items: center;
Align & Justify Self
Align & Justify Self

    .kotak1{
        align-self: stretch;
        justify-self: stretch;
    }
// align-self: start;
// justify-self: end;
// justify-self: center;
Grid Areas
Grid Areas
#content{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 150px;
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
grid-template-areas:
"area1 area1 area1"
". area2 area2";
}
.kotak1{
grid-area: area1;}
.kotak2{
grid-area: area2;}
Responsive

<900px >900px
@media screen and (min-width: 900px){
#content{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 150px;
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
grid-template-areas:
"kotak1 kotak1 kotak1"
". kotak2 kotak2";
}}
.kotak1{
grid-area: kotak1;} Responsive
.kotak2{
grid-area: kotak2;}
Front-End Development

Styling
With CSS
#3 CSS Grid

You might also like