Skip to content

Commit 583225a

Browse files
dinanathsj29dinanathsj29
authored
Chapter 4 - 4.4 - uploaded
Chapter 4 - 4.4 - uploaded
1 parent 9edbc6d commit 583225a

File tree

1 file changed

+168
-0
lines changed

1 file changed

+168
-0
lines changed

‎README.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ Topics included/covered
7878
- 4.1. [Mosaic Layout](#41-mosaic-layout)
7979
- 4.2. [Responsive Grid Layout](#42-responsive-grid-layout)
8080
- 4.3. [Create Custom 12 Column Grid Framework](#43-custom-12-column-grid)
81+
- 4.4. [Columner Layout with Auto Flow Dense](#44-columner-layout-with-auto-flow-dense)
8182

8283
5. [CSS Grid Resources](#5-css-grid-resources)
8384

@@ -3596,6 +3597,173 @@ Let us look into the some of the important properties used with and applicable t
35963597
</figure>
35973598
</p>
35983599

3600+
4.4. Columner Layout with Auto Flow Dense
3601+
---------------------
3602+
3603+
```html
3604+
<!DOCTYPE html>
3605+
3606+
<html lang="en">
3607+
3608+
<head>
3609+
<meta charset="UTF-8">
3610+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3611+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
3612+
<title>4.3-demo-custom-12-column-grid-framework.html</title>
3613+
3614+
<style type="text/css">
3615+
3616+
body {
3617+
margin: 0;
3618+
padding: 0;
3619+
font-family: verdana;
3620+
3621+
color: #ffffff;
3622+
font-size: 1rem;
3623+
text-align: center;
3624+
}
3625+
3626+
.main-container {
3627+
width: 960px;
3628+
margin: 0 auto;
3629+
3630+
display: grid;
3631+
grid-template-columns: repeat(10, 1fr);
3632+
grid-gap: 10px;
3633+
3634+
/* 4.4.2 - */
3635+
/* grid-auto-flow: dense; */
3636+
}
3637+
3638+
.item:nth-child(6n) {
3639+
background-color:#a9a906;
3640+
3641+
/* 4.4.1 - right side every 6th column should cover span remaining space */
3642+
grid-column: span 5;
3643+
3644+
/* 4.4.2 - */
3645+
/* grid-column: span 6; */
3646+
}
3647+
3648+
.main-container > * {
3649+
background-color: #dcdc65;
3650+
padding: 20px;
3651+
}
3652+
</style>
3653+
3654+
</head>
3655+
3656+
<body>
3657+
3658+
<div class="main-container">
3659+
3660+
<div class="item item1">1</div>
3661+
<div class="item item2">2</div>
3662+
<div class="item item3">3</div>
3663+
<div class="item item4">4</div>
3664+
<div class="item item5">5</div>
3665+
<div class="item item6">6</div>
3666+
<div class="item item7">7</div>
3667+
<div class="item item8">8</div>
3668+
<div class="item item9">9</div>
3669+
<div class="item item10">10</div>
3670+
<div class="item item11">11</div>
3671+
<div class="item item12">12</div>
3672+
<div class="item item13">13</div>
3673+
<div class="item item14">14</div>
3674+
<div class="item item15">15</div>
3675+
<div class="item item16">16</div>
3676+
<div class="item item17">17</div>
3677+
<div class="item item18">18</div>
3678+
<div class="item item19">19</div>
3679+
<div class="item item20">20</div>
3680+
<div class="item item21">21</div>
3681+
<div class="item item22">22</div>
3682+
<div class="item item23">23</div>
3683+
<div class="item item24">24</div>
3684+
<div class="item item25">25</div>
3685+
<div class="item item26">26</div>
3686+
<div class="item item27">27</div>
3687+
<div class="item item28">28</div>
3688+
<div class="item item29">29</div>
3689+
<div class="item item30">30</div>
3690+
<div class="item item31">31</div>
3691+
<div class="item item32">32</div>
3692+
<div class="item item33">33</div>
3693+
<div class="item item34">34</div>
3694+
<div class="item item35">35</div>
3695+
<div class="item item36">36</div>
3696+
<div class="item item37">37</div>
3697+
<div class="item item38">38</div>
3698+
<div class="item item39">39</div>
3699+
<div class="item item40">40</div>
3700+
<div class="item item41">41</div>
3701+
<div class="item item42">42</div>
3702+
<div class="item item43">43</div>
3703+
<div class="item item44">44</div>
3704+
<div class="item item45">45</div>
3705+
<div class="item item46">46</div>
3706+
<div class="item item47">47</div>
3707+
<div class="item item48">48</div>
3708+
<div class="item item49">49</div>
3709+
<div class="item item50">50</div>
3710+
<div class="item item51">51</div>
3711+
<div class="item item52">52</div>
3712+
<div class="item item53">53</div>
3713+
<div class="item item54">54</div>
3714+
<div class="item item55">55</div>
3715+
<div class="item item56">56</div>
3716+
<div class="item item57">57</div>
3717+
<div class="item item58">58</div>
3718+
<div class="item item59">59</div>
3719+
<div class="item item60">60</div>
3720+
3721+
</body>
3722+
3723+
</html>
3724+
```
3725+
3726+
<p>
3727+
<figure>
3728+
&nbsp;&nbsp;&nbsp; <img src="_images-css-grid/4.4.1-demo-grid-columner-layout.png" alt="Demo Example: Columner Layout" title="Demo Example: Columner Layout" width="1000" border="2" />
3729+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Demo Example: Columner Layout </figcaption>
3730+
</figure>
3731+
</p>
3732+
3733+
<hr/>
3734+
3735+
```css
3736+
.main-container {
3737+
width: 960px;
3738+
margin: 0 auto;
3739+
3740+
display: grid;
3741+
grid-template-columns: repeat(10, 1fr);
3742+
grid-gap: 10px;
3743+
3744+
/* 4.4.2 - */
3745+
grid-auto-flow: dense;
3746+
}
3747+
3748+
.item:nth-child(6n) {
3749+
background-color:#a9a906;
3750+
3751+
/* 4.4.1 - right side every 6th column should cover span remaining space */
3752+
/* grid-column: span 5; */
3753+
3754+
/* 4.4.2 - */
3755+
grid-column: span 6;
3756+
}
3757+
```
3758+
3759+
<p>
3760+
<figure>
3761+
&nbsp;&nbsp;&nbsp; <img src="_images-css-grid/4.4.2-demo-grid-auto-flow-dense.png" alt="Demo Example: Columner Layout with Auto-flow: dense" title="Demo Example: Columner Layout with Auto-flow: dense" width="1000" border="2" />
3762+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Demo Example: Columner Layout with Auto-flow: dense </figcaption>
3763+
</figure>
3764+
</p>
3765+
3766+
35993767
5 CSS Grid Resources
36003768
=====================
36013769

0 commit comments

Comments
 (0)