xxxxxxxxxx
#defualtlayout{
display: grid;
/* height: 100vh; */
width: 100%;
grid-template-columns: 0.5fr 1fr 1fr 1fr;
grid-template-rows: 0.3fr 0.8fr 0.8fr 0.8fr;
gap: 1px;
grid-template-areas:
"aside header header header"
"aside main main main"
"aside main main main"
"aside main main main"
;
}
aside{
background-color: blue;
grid-area: aside;
height: 100vh;
}
.header_section{
background-color: brown;
grid-area: header;
height: 12vh;
}
main{
background-color: gold;
grid-area: main;
}
xxxxxxxxxx
.container {
display: grid;
grid-template-columns: 6fr 6fr;
grid-column-gap: 20px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}
xxxxxxxxxx
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
Example of CSS Grid as a Default Template
xxxxxxxxxx
.wrapper {
display: grid;
/*Using the full width/height of the designated box elements, use fr as in example below */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/*Delete the two lines above and add more columns/rows by specifying one more for each below */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.box {
background-color: orange;
/*Play with all the columns/rows width/height properties to get what you're desiring*/
}
/* HTML:
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
*/
xxxxxxxxxx
.grid-container {
display: grid;
grid-template-areas:
"hb int int"
"hb ma ma"
"ar ar ar"
"im im im";
/*I give the rows and columns a size just for comfort, but you can use '1fr'*/
grid-template-rows: repeat(5, 100px);
grid-template-columns: repeat(3, 100px);
background-color: #2196F3;
padding: 10px;
}
.grid-item, .grid-main-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 15px;
font-size: 30px;
text-align: center;
}
/*I use id's to be more specific in wich thing i want to assign wich grid-area*/
#hobbies {
grid-area: hb;
}
#intro {
grid-area: int;
}
#tutorial {
grid-area: ar;
}
#image_mapping {
grid-area: im;
}
/* main container to have that 2 section's inside another block*/
#main-container {
grid-area: ma;
display: grid;
grid-template-areas:
"app frm"
"app frm";
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
/*you can put padding: 0; so the main container is invisible*/
}
#application {
grid-area: app;
}
#form_elements {
grid-area: frm;
}
xxxxxxxxxx
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two columns with equal width */
grid-gap: 10px; /* Gap between grid items */
}
.item {
background-color: #ccc;
padding: 20px;
}
xxxxxxxxxx
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
.grid-container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: auto auto auto;
place-items: center;
}
.grid-item {
background-color: silver;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
xxxxxxxxxx
/* Display-grid: When the display property is set to grid the container turn ups to the grid. */
display: grid;
/* Grid-template-areas: Determines how to display columns and rows, using named grid items */
grid-template-areas: "myArea myArea . . .";
/* Grid-column-gap: Defines the gap between the columns */
grid-column-gap: 50px;
/* Grid-row-gap: Specifies the size of the gap between rows */
grid-row-gap: 50px;
/* Grid-template-columns: It Defines how many columns there should be in a grid layout */
grid-template-columns: auto auto auto auto;
/* Grid-template-rows: similar to grid-template-columns, The grid-template-rows property specifies the number of rows in a grid layout. */
grid-template-rows: 10px 30px;
/* Grid-auto-columns: The grid-auto-columns property specifies a size for the columns in a grid container. */
grid-auto-columns: 50px;
/* Put a default size for the rows in a grid: */
grid-auto-rows: 250px;
/* Grid-auto-flow: */
grid-auto-flow: column;
/* The place-content property allows you to align both justify-content and align content. */
place-content: align-content / justify-content ;
/* Grid-column-start: Defines where to start the grid item. */
grid-column-start: 4;
/* Grid-column-end: on which column line the item will end */
grid-column-end: span 2;
/* Grid-row-start: This property specifies on which row line the item will start */
grid-row-start: 2;
/* Grid-row-end: on which row line the item will end: */
grid-row-end: span 1;
xxxxxxxxxx
.grid-container {
display: grid;
grid-template-areas:
"hb int int"
"hb ma ma"
"ar ar ar"
"im im im";
/*I give the rows and columns a size just for comfort, but you can use '1fr'*/
grid-template-rows: repeat(5, 100px);
grid-template-columns: repeat(3, 100px);
background-color: #2196F3;
padding: 10px;
}
.grid-item, .grid-main-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 15px;
font-size: 30px;
text-align: center;
}
/*I use id's to be more specific in wich thing i want to assign wich grid-area*/
#hobbies {
grid-area: hb;
}
#intro {
grid-area: int;
}
#tutorial {
grid-area: ar;
}
#image_mapping {
grid-area: im;
}
/* main container to have that 2 section's inside another block*/
#main-container {
grid-area: ma;
display: grid;
grid-template-areas:
"app frm"
"app frm";
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
/*you can put padding: 0; so the main container is invisible*/
}
#application {
grid-area: app;
}
#form_elements {
grid-area: frm;
}