Skip to content

Commit 89ca363

Browse files
dinanathsj29dinanathsj29
authored
Chapter 3 - 3.4.3 & 3.4.4 uploaded
Chapter 3 - 3.4.3 & 3.4.4 exampes with new layout uploaded
1 parent 2ff0b48 commit 89ca363

File tree

1 file changed

+284
-0
lines changed

1 file changed

+284
-0
lines changed

‎README.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2633,6 +2633,290 @@ Let us look into the some of the important properties used with and applicable t
26332633
</figure>
26342634
</p>
26352635

2636+
<hr/>
2637+
2638+
> **Syntax & Example**: `3.4.3-grid-lines-grid-column-row-layout-span.html`
2639+
2640+
```html
2641+
<!DOCTYPE html>
2642+
2643+
<html lang="en">
2644+
2645+
<head>
2646+
<meta charset="UTF-8">
2647+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2648+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
2649+
<title>3.4.3-grid-lines-grid-column-row-layout-span.html</title>
2650+
2651+
<style type="text/css">
2652+
2653+
body {
2654+
margin: 0;
2655+
padding: 0;
2656+
font-family: verdana;
2657+
2658+
color: #ffffff;
2659+
font-size: 1rem;
2660+
text-align: center;
2661+
}
2662+
2663+
.main-container {
2664+
width: 980px;
2665+
margin: 0 auto;
2666+
2667+
display: grid; /* block level grid container */
2668+
grid-template-columns: repeat(6, 1fr);
2669+
grid-template-rows: repeat(6, minmax(70px, auto));
2670+
grid-gap: 20px;
2671+
}
2672+
2673+
.main-container > * {
2674+
background-color: #ddd459;
2675+
padding: 20px;
2676+
}
2677+
2678+
.header-section {
2679+
background-color:#aaa459;
2680+
/* grid-column-start: 1;
2681+
grid-column-end: 7; */
2682+
2683+
/* grid-column: 1/7; */
2684+
2685+
/* grid-column: 1 / -1; */ /* Negative ie -1 is used for last-till end column/row */
2686+
/* grid-column: span 6; */ /* cover-span 6 columns/row */
2687+
grid-column: 1 / span 6; /* start from 1st track and cover-span 6 */
2688+
}
2689+
2690+
.main-section {
2691+
/* grid-column-start: 2;
2692+
grid-column-end: 6; */
2693+
2694+
/* grid-column: 2/6; */
2695+
2696+
grid-column: 2 / span 4;
2697+
}
2698+
2699+
.aside-section {
2700+
/* grid-column-start: 1;
2701+
grid-column-end: 4;
2702+
2703+
grid-row-start: 3;
2704+
grid-row-end: 5; */
2705+
2706+
/* grid-column: 1/4;
2707+
grid-row:3/5; */
2708+
2709+
grid-column: 1 / span 3;
2710+
grid-row: 3 / span 2;
2711+
}
2712+
2713+
.nav-section {
2714+
/* grid-column-start: 4;
2715+
grid-column-end: 7;
2716+
2717+
grid-row-start: 3;
2718+
grid-row-end: 5; */
2719+
2720+
/* grid-column: 4/7;
2721+
grid-row: 3/5; */
2722+
2723+
grid-column: 4 / span 3;
2724+
grid-row: 3 / span 2;
2725+
}
2726+
2727+
.section {
2728+
/* grid-column-start: 2;
2729+
grid-column-end: 6; */
2730+
2731+
/* grid-column: 2/6; */
2732+
2733+
grid-column: 2 / span 4;
2734+
}
2735+
2736+
.footer-section {
2737+
background-color:#aaa459;
2738+
/* grid-column-start: 1;
2739+
grid-column-end: 7; */
2740+
2741+
/* grid-column: 1/7; */
2742+
2743+
/* grid-column: 1 / -1; */
2744+
/* grid-column: span 6; */
2745+
2746+
grid-column: 1 / span 6;
2747+
}
2748+
</style>
2749+
2750+
</head>
2751+
2752+
<body>
2753+
2754+
<div class="main-container">
2755+
<header class="header-section"><h1>Header Section</h1></header>
2756+
<main class="main-section">Main Section</main>
2757+
<aside class="aside-section">Aside Section</aside>
2758+
<nav class="nav-section">Nav Section</nav>
2759+
<section class="section">Section Section</section>
2760+
<footer class="footer-section"><small>Footer Section</small></footer>
2761+
</div>
2762+
2763+
</body>
2764+
2765+
</html>
2766+
```
2767+
2768+
<p>
2769+
<figure>
2770+
&nbsp;&nbsp;&nbsp; <img src="_images-css-grid/3.4.3-grid-lines-grid-column-row-layout-span.png" alt="grid-column-row with span" title="grid-column-row with span" width="1000" border="2" />
2771+
<figcaption>&nbsp;&nbsp;&nbsp; Image - grid-column-row with span </figcaption>
2772+
</figure>
2773+
</p>
2774+
2775+
<hr/>
2776+
2777+
> **Syntax & Example**: `3.4.4-grid-lines-grid-column-row-layout-span.html`
2778+
2779+
```html
2780+
<!DOCTYPE html>
2781+
2782+
<html lang="en">
2783+
2784+
<head>
2785+
<meta charset="UTF-8">
2786+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2787+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
2788+
<title>3.4.4-grid-lines-grid-column-row-layout-span.html</title>
2789+
2790+
<style type="text/css">
2791+
2792+
body {
2793+
margin: 0;
2794+
padding: 0;
2795+
font-family: verdana;
2796+
2797+
color: #ffffff;
2798+
font-size: 1rem;
2799+
text-align: center;
2800+
}
2801+
2802+
.main-container {
2803+
width: 980px;
2804+
margin: 0 auto;
2805+
2806+
display: grid; /* block level grid container */
2807+
grid-template-columns: repeat(4, 1fr 1fr);
2808+
grid-template-rows: repeat(10, 60px);
2809+
grid-gap: 10px;
2810+
}
2811+
2812+
.main-container > * {
2813+
background-color:#00bfff;
2814+
padding: 20px;
2815+
border: 2px solid #0000004f;
2816+
}
2817+
2818+
.item {
2819+
/* display: grid;
2820+
justify-content: center;
2821+
align-items: center; */
2822+
}
2823+
2824+
.item1 {
2825+
/* grid-column: 2 / 4; */
2826+
grid-column: 2 / span 2;
2827+
}
2828+
2829+
.item2 {
2830+
/* grid-column: 4 / -1; */
2831+
grid-column: 4 / span 5;
2832+
}
2833+
2834+
.item3, .item4 {
2835+
grid-column: span 2;
2836+
grid-row: span 2;
2837+
}
2838+
2839+
.item6, .item8 {
2840+
grid-row: span 2;
2841+
}
2842+
2843+
.item11 {
2844+
grid-column: 1 / -1;
2845+
/* grid-column: 1 / span 8; */
2846+
}
2847+
2848+
.item12, .item14 {
2849+
grid-column: span 3;
2850+
grid-row: span 3;
2851+
}
2852+
2853+
.item13, .item15 {
2854+
grid-row: span 3;
2855+
}
2856+
2857+
.item16, .item17 {
2858+
grid-column: span 4;
2859+
}
2860+
2861+
.item18 {
2862+
grid-column: 2 / span 6;
2863+
}
2864+
2865+
.item19 {
2866+
grid-column: 1 / span 8;
2867+
}
2868+
2869+
</style>
2870+
2871+
</head>
2872+
2873+
<body>
2874+
2875+
<div class="main-container">
2876+
<div class="item item1">Item 1 LOGO </div>
2877+
<div class="item item2">Item 2 NAVIGATION BAR </div>
2878+
<div class="item item3">Item 3</div>
2879+
<div class="item item4">Item 4</div>
2880+
<div class="item item5">Item 5</div>
2881+
<div class="item item6">Item 6</div>
2882+
<div class="item item7">Item 7</div>
2883+
<div class="item item8">Item 8</div>
2884+
<div class="item item9">Item 9</div>
2885+
<div class="item item10">Item 10</div>
2886+
<div class="item item11">Item 11</div>
2887+
<div class="item item12">Item 12</div>
2888+
<div class="item item13">Item 13</div>
2889+
<div class="item item14">Item 14</div>
2890+
<div class="item item15">Item 15</div>
2891+
<div class="item item16">Item 16</div>
2892+
<div class="item item17">Item 17</div>
2893+
<div class="item item18">Item 18</div>
2894+
<div class="item item19">Item 19</div>
2895+
<div class="item item20">Item 20</div>
2896+
<div class="item item21">Item 21</div>
2897+
<div class="item item22">Item 22</div>
2898+
<div class="item item23">Item 23</div>
2899+
<div class="item item24">Item 24</div>
2900+
<div class="item item25">Item 25</div>
2901+
<div class="item item26">Item 26</div>
2902+
<div class="item item27">Item 27</div>
2903+
<div class="item item28">Item 28</div>
2904+
<div class="item item29">Item 29</div>
2905+
<div class="item item30">Item 30</div>
2906+
</div>
2907+
2908+
</body>
2909+
2910+
</html>
2911+
```
2912+
2913+
<p>
2914+
<figure>
2915+
&nbsp;&nbsp;&nbsp; <img src="_images-css-grid/3.4.4-grid-lines-grid-column-row-layout-span.png" alt="grid-column-row with span" title="grid-column-row with span" width="1000" border="2" />
2916+
<figcaption>&nbsp;&nbsp;&nbsp; Image - grid-column-row with span </figcaption>
2917+
</figure>
2918+
</p>
2919+
26362920
3.5. Alignment and Justifying items
26372921
---------------------
26382922
3.5. Alignment & Justify items - justify-self & align-self

0 commit comments

Comments
 (0)