revision:
code:
<div class="wrapper">
<div class="box box_1">1</div>
<div class="box box_2">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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
<style>
.box {background-color: skyblue;color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box:nth-child(even) {background-color: orange; color: #000; }
.wrapper { width: 600px; height: 100px; display: grid; grid-gap: 10px;
grid-template-columns: repeat(6, 100px);
}
</style>
code:
<div class="wrapper1">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">5</div>
<div class="box1">6</div>
<div class="box1">7</div>
<div class="box1">8</div>
<div class="box1">9</div>
<div class="box1">10</div>
<div class="box1">11</div>
<div class="box1">12</div>
</div>
<style>
.box1 {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; }
.box1:nth-child(even) { background-color: orange;color: blue;}
.wrapper1 { width: 600px; display: grid; grid-gap: 10px; grid-template-columns: repeat(6, 100px);
grid-template-rows: 100px 100px 100px; grid-auto-flow: column; }
</style>
code:
<div class="wrapper2">
<div class="box2">1</div>
<div class="box2 box2_1">2</div>
<div class="box2">3</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2">6</div>
<div class="box2">7</div>
<div class="box2">8</div>
<div class="box2">9</div>
<div class="box2">10</div>
<div class="box2">11</div>
<div class="box2">12</div>
</div>
<style>
.box2 {background-color: pink; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; }
.box2:nth-child(even) {background-color: green; color: #fff;}
.wrapper2 {width: 600px; display: grid; grid-template-columns: repeat(6, 100px); grid-gap: 10px; }
.box2_1 { grid-column: 3 / 6; grid-row: 2 / 3; outline: 2px solid red; z-index: 10;}
</style>
code:
<div class="wrapper3">
<div class="box3 a3">A</div>
<div class="box3 b3">B</div>
<div class="box3 c3">C</div>
<div class="box3 d3">D</div>
<div class="box3 e3">E</div>
</div>
<style>
.wrapper3 {display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, 100px );
background-color:skyblue; color: #444; }
.box3 {background-color: red; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.a3 {grid-column: 1 / 3;}
.b3 {grid-column: 3 / 5 ;}
.c3 {grid-column: 1 / 2 ; grid-row: 2 ;}
.d3 {grid-column: 2 / 5 ;grid-row: 2 ; }
.e3 {grid-column: 1 / 5; grid-row: 3;}
</style>
code:
<div class="wrapper3a">
<div class="box3a a3a">A</div>
<div class="box3a b3a">B</div>
<div class="box3a c3a">C</div>
<div class="box3a d3a">D</div>
<div class="box3a e3a">E</div>
</div>
<style>
.wrapper3a { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, [col] 100px ) ;
grid-template-rows: repeat(auto-fill, [row] auto ); background-color: skyblue; color: #444;
height: 20vh;}
.box3a {background-color: orange; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.a3a {grid-column: col / span 2; grid-row: row ;}
.b3a {grid-column: col 3 / span 2 ; grid-row: row ; }
.c3a { grid-column: col ; grid-row: row 2 ;}
.d3a { grid-column: col 2 / span 3 ; grid-row: row 2 ;}
.e3a {grid-column: col / span 4; grid-row: row 3; }
</style>
code:
<div class="wrapper3b">
<div class="box3b">1</div>
<div class="box3b">2</div>
<div class="box3b">3</div>
<div class="box3b">4</div>
<div class="box3b">5</div>
<div class="box3b">6</div>
<div class="box3b">7</div>
<div class="box3b">8</div>
<div class="box3b">9</div>
<div class="box3b">10</div>
<div class="box3b">11</div>
<div class="box3b">12</div>
</div>
<style>
.wrapper3b {display: grid; border: 2px solid #000; grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 100px 200px); }
.box3b { background-color: orange; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.box3b:nth-child(even) {background-color: #ccc; color: #000; }
</style>
code:
<div class="wrapper3c">
<div class="box3c box3c_1">1</div>
<div class="box3c box3c-2">2</div>
<div class="box3c">3</div>
<div class="box3c">4</div>
<div class="box3c">5</div>
<div class="box3c">6</div>
<div class="box3c">7</div>
<div class="box3c">8</div>
<div class="box3c">9</div>
<div class="box3c">10</div>
<div class="box3c">11</div>
<div class="box3c">12</div>
</div>
<style>
.wrapper3c { display: grid; border:1px solid #000; grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px,1fr) minmax(200px,2fr));}
.box3c {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.box3c:nth-child(even) { background-color: #ccc; color: #000;}
</style>
code:
<div>
<div class="wrapper3d">
<div class="box3d">1</div>
<div class="box3d">2</div>
<div class="box3d">3</div>
</div>
<div class="wrapper3e">
<div class="box3e">1</div>
<div class="box3e">2</div>
<div class="box3e">3</div>
</div>
</div>
<style>
.wrapper3d {display: grid; border:1px solid #000; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); margin-bottom: 2em; }
.wrapper3e {display: grid; border:1px solid #000; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));}
.box3d, .box3e { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.box3d:nth-child(even), .box3e:nth-child(even){ background-color: #ccc;color: #000;}
</style>
code:
<div class="wrapper4">
<div class="box4 a4">A</div>
<div class="box4 b4">B</div>
<div class="box4 c4">C</div>
<div class="box4 d4">
<div class="box4_4 e4">E</div>
<div class="box4_4 f4">F</div>
<div class="box4_4 g4">G</div>
</div>
</div>
<style>
.wrapper4 { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, [col] 150px ) ;
grid-template-rows: repeat(2, [row] auto );background-color: skyblue; color: #444;
& .box4 { background-color: green; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; }
& .box4_4 {background-color: aliceblue; color: #444;}
& .a4 {grid-column: col / span 2; grid-row: row;}
& .b4 {grid-column: col 3 / span 2; grid-row: row;}
& .c4 {grid-column: col / span 2; grid-row: row 2;}
& .d4 {grid-column: col 3 / span 2; grid-row: row 2; display: grid; grid-gap: 10px;
grid-template-columns: 1fr 1fr; }
& .e4 {grid-column: 1 / 3; grid-row: 1;}
& .f4 {grid-column: 1; grid-row: 2; }
& .g4 {grid-column: 2; grid-row: 2; }
}
</style>
code:
<div class="wrapper5">
<div class="box5 header5">Header</div>
<div class="box5 sidebar5">Sidebar</div>
<div class="box5 content5">Content</div>
<div class="overlay5">overlay</div>
</div>
<style>
.sidebar5 {grid-area: sidebar5;}
.content5 {grid-area: content5;}
.header5 {grid-area: header5;}
.wrapper5 {display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px;
grid-template-areas: "header5 header5 header5" "sidebar5 content5 content5";
background-color: skyblue; color: #444; width: 40vw; height: 20vw;}
.box5 {background-color: lightgreen; color: #000; border-radius: 5px; padding: 20px; font-size: 150%;}
.header5 {background-color: #999;}
.overlay5 {background-color: red; z-index: 10; grid-column: content5-start / content5-end;
grid-row: header5-start / content5-end;}
</style>
code:
<div class="wrapper6">
<div class="box6 box6-1">1</div>
<div class="box6 box6-2">2</div>
<div class="box6 box6-3">3</div>
<div class="box6 box6-4">4</div>
<div class="box6 box6-5">5</div>
<div class="box6 box6-6">6</div>
<div class="box6 box6-7">7</div>
<div class="box6 box6-8">8</div>
<div class="box6 box6-9">9</div>
<div class="box6 box6-10">10</div>
<div class="box6 box6-11">11</div>
<div class="box6 box6-12">12</div>
</div>
<style>
.box6 {background-color: skyblue; color: #000; border-radius: 5px; padding: 20px;
font-size: 150%; order: 1;}
.box6:nth-child(even) {background-color: orange; color: #000;}
.wrapper6 {width: 600px; display: grid; grid-template-columns: repeat(6, 100px);
grid-gap: 10px; width: 40vw; height: 20vh;}
.box6-1 { order: 3;}
.box6-2 { order: 2;}
</style>
This is box A.
This is box B.
This is box C.
This is box D.
Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row).
The align-items property is used to align the content inside each grid-area.
Other values of align-items are:
code:
<div class="wrapper7">
<div class="box7 a7"><p>This is box A. </p></div>
<div class="box7 b7"><p>This is box B.</p></div>
<div class="box7 c7"><p>This is box C.</p></div>
<div class="box7 d7"><p>This is box D.</p></div>
<div class="box7 e7"><p>Each of the boxes on the left has a grid area of 3 columns
and 3 rows (we're counting the gutter col/row). </p>
<p>The align-items property is used to align the content inside each grid-area.</p>
<p>Other values of align-items are:</p>
<ul>
<li>stretch</li>
<li>start</li>
<li>end</li>
<li>center</li>
</ul>
</div>
</div>
<style>
.wrapper7 {display: grid; align-items: center; font: 40% Arial, Helvetica, sans-serif;
grid-gap: 10px; grid-template-columns: repeat(6, 100px); grid-template-rows: repeat( 4, 100px);
background-color: skyblue; color: #444; }
.box7 { border: 1px solid #444; padding: 20px; font-size: 150%;}
.a7 { grid-column: 1 / 3; grid-row: 1 / 3;}
.b7 { grid-column: 3 / 5; grid-row: 1 / 3;}
.c7 { grid-column: 1 / 3; grid-row: 3 / 6;}
.d7 { grid-column: 3 / 5; grid-row: 3 / 6;}
.e7 { grid-column: 5 / 7; grid-row: 1 / 6; align-self: stretch;}
</style>
This is box A.
This is box B.
This is box C.
This is box D.
Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row).
The justify-items property is used to justify the content inside each grid-area.
Other values of justify-items are:
code:
<div class="wrapper8">
<div class="box8 a8"><p>This is box A. </p></div>
<div class="box8 b8"><p>This is box B.</p></div>
<div class="box8 c8"><p>This is box C.</p></div>
<div class="box8 d8"><p>This is box D.</p></div>
<div class="box8 e8"><p>Each of the boxes on the left has a grid area of 3 columns and
3 rows (we're counting the gutter col/row). </p>
<p>The justify-items property is used to justify the content inside each grid-area.</p>
<p>Other values of justify-items are:</p>
<ul>
<li>stretch</li>
<li>start</li>
<li>end</li>
<li>center</li>
</ul>
</div>
</div>
<style>
.wrapper8 {display: grid; justify-items: center;; font: 40% Arial, Helvetica, sans-serif;
grid-gap: 10px; grid-template-columns: repeat(6, 100px); grid-template-rows: repeat( 4, 100px);
background-color: skyblue; color: #444; }
.box8 { border: 1px solid #444; padding: 20px; font-size: 150%;}
.a8 { grid-column: 1 / 3; grid-row: 1 / 3;}
.b8 { grid-column: 3 / 5; grid-row: 1 / 3;}
.c8 { grid-column: 1 / 3; grid-row: 3 / 6;}
.d8 { grid-column: 3 / 5; grid-row: 3 / 6;}
.e8 { grid-column: 5 / 7; grid-row: 1 / 6; align-self: stretch;}
</style>
This is box A.
align-self: stretchThis is box B.
align-self: endThis is box C.
align-self: startThis is box D.
align-self: centerEach of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row).
The align-self property is used to align the content inside the grid-area.
code:
<div class="wrapper9">
<div class="box9 a9"><p>This is box A. </p></div>
<div class="box9 b9"><p>This is box B.</p></div>
<div class="box9 c9"><p>This is box C.</p></div>
<div class="box9 d9"><p>This is box D.</p></div>
<div class="box9 e9"><p>Each of the boxes on the left has a grid area of 3 columns and
3 rows (we're counting the gutter col/row). </p>
<p>The align-self property is used to align the content inside the grid-area.</p>
</div>
</div>
<style>
.wrapper9 {display: grid; align-self: center;; font: 40% Arial, Helvetica, sans-serif; grid-gap: 10px;
grid-template-columns: repeat(6, 100px); grid-template-rows: repeat( 4, 100px);
background-color: skyblue; color: #444; }
.box9 { border: 1px solid #444; padding: 20px; font-size: 150%;}
.a9 { grid-column: 1 / 3; grid-row: 1 / 3; align-self: stretch;}
.b9 { grid-column: 3 / 5; grid-row: 1 / 3; align-self: end;}
.c9 { grid-column: 1 / 3; grid-row: 3 / 6; align-self: start;}
.d9 { grid-column: 3 / 5; grid-row: 3 / 6; align-self: center;}
.e9 { grid-column: 5 / 7; grid-row: 1 / 6; align-self: stretch;}
</style>
This is box A.
justify-self: stretchThis is box B.
justify-self: endThis is box C.
justify-self: startThis is box D.
justify-self: centerEach of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row).
The justify-self property is used to justify the content inside the grid-area.
code:
<div class="wrapper10">
<div class="box10 a10"><p>This is box A. </p><code>justify-self: stretch</code></div>
<div class="box10 b10"><p>This is box B.</p><code>justify-self: end</code></div>
<div class="box10 c10"><p>This is box C.</p><code>justify-self: start</code></div>
<div class="box10 d10"><p>This is box D.</p> <code>justify-self: center</code></div>
<div class="box10 e10"><p>Each of the boxes on the left has a grid area of 3 columns and
3 rows (we're counting the gutter col/row). </p>
<p>The justify-self property is used to justify the content inside the grid-area.</p>
</div>
</div>
<style>
.wrapper10 {display: grid; align-self: center;; font: 40% Arial, Helvetica, sans-serif; grid-gap: 10px;
grid-template-columns: repeat(6, 100px); grid-template-rows: repeat( 4, 100px);
background-color: skyblue; color: #444; }
.box10 { border: 1px solid #444; padding: 20px; font-size: 150%;}
.a10 { grid-column: 1 / 3; grid-row: 1 / 3; justify-self: stretch;}
.b10 { grid-column: 3 / 5; grid-row: 1 / 3; justify-self: end;}
.c10 { grid-column: 1 / 3; grid-row: 3 / 6; justify-self: start;}
.d10 { grid-column: 3 / 5; grid-row: 3 / 6; justify-self: center;}
.e10 { grid-column: 5 / 7; grid-row: 1 / 6; justify-self: stretch;}
</style>
code:
<div class="wrapper_a">
<div class="box_a a_a">A</div>
<div class="box_a b_a">B</div>
<div class="box_a c_a">C</div>
<div class="box_a d_a">D</div>
<div class="box_a e_a">E</div>
<div class="box_a f_a">F</div>
<div class="box_a g_a">G</div>
<div class="box_a h_a">H</div>
<div class="box_a i_a">I</div>
</div>
<style>
.wrapper_a {display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr) ) ; background-color: skyblue; color: #444;}
.box_a { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; }
</style>
code:
<div class="wrapper_b">
<div class="box_b a_b">A</div>
<div class="box_b b_b">B</div>
<div class="box_b c_b">C</div>
<div class="box_b d_b">D</div>
<div class="box_b e_b">E</div>
<div class="box_b f_b">F</div>
<div class="box_b g_b">G</div>
<div class="box_b h_b">H</div>
<div class="box_b i_b">I</div>
<div class="box_b j_b">J</div>
<div class="box_b k_b">K</div>
<div class="box_b l_b">L</div>
<div class="box_b m_b">M</div>
</div>
<style>
.wrapper_b { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr) ) ; background-color: skyblue; color: #444;}
.box_b { background-color: orange; color: #fff; border-radius: 5px; padding: 20px;
font-size: 150%;}
.a_b {grid-column: auto / span 2;}
.k_b {grid-column: auto / span 3;}
.g_b {grid-column: auto / span 2; grid-row: auto / span 2;}
</style>
code:
<div class="wrapper_c">
<div class="box_c a_c">A</div>
<div class="box_c b_c">B</div>
<div class="box_c c_c">C</div>
</div>
<style>
.wrapper_c {display: grid; grid-gap: 10px; grid-template-columns: minmax(200px, 1fr) 200px
200px; background-color: skyblue; color: #444; }
.box_c {background-color: violet; color: #000; border-radius: 5px; padding: 20px;
font-size: 150%; }
</style>
code:
<div class="wrapper_d">
<div class="box_d item1">One</div>
<div class="box_d item2">Two</div>
<div class="box_d item3">Three</div>
<div class="box_d item4">Four</div>
<div class="box_d item5">Five</div>
</div>
<style>
.wrapper_d {margin: 0 0 20px 0; width: 500px; height: 400px; border: 2px solid darkgrey; display: grid;
grid-gap: 10px; grid-template-columns: repeat(4, 80px);grid-template-rows: repeat(3,100px);
justify-content: center; align-content: end;}
.box_d { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.item1 { grid-column: 1 / 5;}
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
</style>
code:
<div class="wrapper_e aligned">
<div class="box_e item1_e">One</div>
<div class="box_e item2_e">Two</div>
<div class="box_e item3_e">Three</div>
<div class="box_e item4_e">Four</div>
<div class="box_e item5_e">Five</div>
</div>
<style>
.wrapper_e { margin: 0 0 20px 0; width: 500px; height: 400px; border: 2px solid darkgrey; display:
grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px);
align-content: space-around; justify-content: space-between; }
.box_e { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;}
.item1_e { grid-column: 1 / 5;}
.item2_e { grid-column: 1 / 3; grid-row: 2 / 4;}
.item3_e { grid-column: 3 / 5; }
</style>