😇Column Grid full example(Responsive)
https://www.quackit.com/html/templates/css_grid_templates.cfm
<!doctype html>
<title>Example</title>
<style>
.grid {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.box {
color: white;
font-size: 4vw;
padding: 10px;
background: gold;
text-align: center;
}
.box:nth-child(1) {
grid-column: span 12;
}
.box:nth-child(2),
.box:nth-child(3) {
grid-column: span 6;
}
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
grid-column: span 4;
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
grid-column: span 3;
}
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
grid-column: span 2;
}
@media screen and (max-width: 575px) {
.grid {
display: block;
}
.box {
margin: 10px 0;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
</main>12 Column Grid (Mobile First)
<!doctype html>
<title>Example</title>
<style>
.grid {
display: block;
}
.box {
color: white;
font-size: 4vw;
padding: 10px;
background: yellowgreen;
margin: 10px 0;
text-align: center;
}
@media screen and (min-width: 576px) {
.grid {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.box {
margin: 0;
}
.box:nth-child(1) {
grid-column: span 12;
}
.box:nth-child(2),
.box:nth-child(3) {
grid-column: span 6;
}
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
grid-column: span 4;
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
grid-column: span 3;
}
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
grid-column: span 2;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
</main>12 Column Grid Example 2 (Responsive)
<!doctype html>
<title>Example</title>
<style>
.grid {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.box {
color: white;
padding: 7px;
background: gold;
text-align: center;
}
.box:nth-child(2),
.box:nth-child(21) {
grid-column: span 11;
}
.box:nth-child(3),
.box:nth-child(20) {
grid-column: span 2;
}
.box:nth-child(4),
.box:nth-child(19) {
grid-column: span 10;
}
.box:nth-child(5),
.box:nth-child(18) {
grid-column: span 3;
}
.box:nth-child(6),
.box:nth-child(17) {
grid-column: span 9;
}
.box:nth-child(7),
.box:nth-child(16) {
grid-column: span 4;
}
.box:nth-child(8),
.box:nth-child(15) {
grid-column: span 8;
}
.box:nth-child(9),
.box:nth-child(14) {
grid-column: span 5;
}
.box:nth-child(10),
.box:nth-child(13) {
grid-column: span 7;
}
.box:nth-child(11),
.box:nth-child(12) {
grid-column: span 6;
}
@media screen and (max-width: 575px) {
.grid {
display: block;
}
.box {
margin: 10px 0;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
</main>12 Column Grid Example 2 (Mobile First)
<!doctype html>
<title>Example</title>
<style>
.grid {
display: block;
}
.box {
color: white;
padding: 7px;
background: yellowgreen;
margin: 10px 0;
text-align: center;
}
@media screen and (min-width: 576px) {
.grid {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.box {
margin: 0;
}
.box:nth-child(2),
.box:nth-child(21) {
grid-column: span 11;
}
.box:nth-child(3),
.box:nth-child(20) {
grid-column: span 2;
}
.box:nth-child(4),
.box:nth-child(19) {
grid-column: span 10;
}
.box:nth-child(5),
.box:nth-child(18) {
grid-column: span 3;
}
.box:nth-child(6),
.box:nth-child(17) {
grid-column: span 9;
}
.box:nth-child(7),
.box:nth-child(16) {
grid-column: span 4;
}
.box:nth-child(8),
.box:nth-child(15) {
grid-column: span 8;
}
.box:nth-child(9),
.box:nth-child(14) {
grid-column: span 5;
}
.box:nth-child(10),
.box:nth-child(13) {
grid-column: span 7;
}
.box:nth-child(11),
.box:nth-child(12) {
grid-column: span 6;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
</main>12 Column Vertical Grid (Responsive)
<!doctype html>
<title>Example</title>
<style>
.grid {
display: grid;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: column;
grid-gap: 10px;
}
.box {
color: white;
font-size: 2vh;
padding: 10px;
background: gold;
margin: 0;
text-align: center;
}
.box:nth-child(1) {
grid-row: span 12;
}
.box:nth-child(2),
.box:nth-child(3) {
grid-row: span 6;
}
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
grid-row: span 4;
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
grid-row: span 3;
}
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
grid-row: span 2;
}
@media screen and (max-width: 575px) {
.grid {
display: block;
}
.box {
margin: 10px 0;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
</main>12 Column Vertical Grid (Mobile First)
<!doctype html>
<title>Example</title>
<style>
.grid {
display: block;
}
.box {
color: white;
font-size: 2vh;
padding: 10px;
background: yellowgreen;
margin: 10px 0;
text-align: center;
}
@media screen and (min-width: 576px) {
.grid {
display: grid;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: column;
grid-gap: 10px;
}
.box {
margin: 0;
}
.box:nth-child(1) {
grid-row: span 12;
}
.box:nth-child(2),
.box:nth-child(3) {
grid-row: span 6;
}
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
grid-row: span 4;
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
grid-row: span 3;
}
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
grid-row: span 2;
}
}
</style>
<main class="grid">
<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 class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
</main>Grid Layout 1
<!doctype html>
<title>CSS Grid Template 1</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 2
<!doctype html>
<title>CSS Grid Template 2</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 3
<!doctype html>
<title>CSS Grid Template 3</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"article nav ads"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 1fr 20% 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 4
<!doctype html>
<title>CSS Grid Template 4</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"article nav ads"
"footer nav ads";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 1fr 20% 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 5
<!doctype html>
<title>CSS Grid Template 5</title>
<style>
body {
display: grid;
grid-template-areas:
"nav header header"
"nav article ads"
"nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 6
<!doctype html>
<title>CSS Grid Template 6</title>
<style>
body {
display: grid;
grid-template-areas:
"header header"
"nav article"
"nav ads"
"footer footer";
grid-template-rows: 80px 1fr 70px 70px;
grid-template-columns: 20% 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 7
<!doctype html>
<title>CSS Grid Template 7</title>
<style>
body {
display: grid;
grid-template-areas:
"nav header"
"nav article"
"nav ads"
"nav footer";
grid-template-rows: 80px 1fr 70px 70px;
grid-template-columns: 20% 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 8
<!doctype html>
<title>CSS Grid Template 8</title>
<style>
body {
display: grid;
grid-template-areas:
"header header"
"ads article"
"nav article"
"nav footer";
grid-template-rows: 80px 120px 1fr 70px;
grid-template-columns: 20% 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 9
<!doctype html>
<title>CSS Grid Template 9</title>
<style>
body {
display: grid;
grid-template-areas:
"header header"
"nav article"
"ads article"
"ads footer";
grid-template-rows: 80px 1fr 120px 70px;
grid-template-columns: 20% 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 10
<!doctype html>
<title>CSS Grid Template 10</title>
<style>
body {
display: grid;
grid-template-areas:
"header header ads"
"nav article article"
"nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: yellowgreen;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>Grid Layout 11
<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
height: 100vh;
margin: 0;
}
#grid > div {
color: white;
font-size: 4vw;
padding: 10px;
background: gold;
}
#grid > div:nth-child(1) {
grid-column: span 4;
}
#grid > div:nth-child(2) {
grid-row: span 4;
}
#grid > div:nth-child(4) {
grid-column: span 2;
}
#grid > div:nth-child(5) {
grid-column: span 2;
}
#grid > div:nth-child(10) {
grid-column: span 3;
}
</style>
<body id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>Grid Layout 12
<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-rows: 50vh repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
height: 100vh;
margin: 0;
}
#grid > div {
color: white;
font-size: 4vw;
padding: 10px;
background: gold;
}
#grid > div:nth-child(1) {
grid-column: span 4;
}
#grid > div:nth-child(2) {
grid-row: span 4;
}
#grid > div:nth-child(4) {
grid-row: span 2;
}
#grid > div:nth-child(5) {
grid-row: span 3;
}
#grid > div:nth-child(6) {
grid-row: span 3;
}
</style>
<body id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>Form with Auto Placement
<!doctype html>
<title>Form template with CSS grid auto placement</title>
<link href="https://fonts.googleapis.com/css?family=Unkempt" rel="stylesheet">
<style>
.myForm > * {
font: 1.4em 'Unkempt', sans-serif;
}
.myForm {
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
grid-auto-flow: row;
grid-gap: .8em .5em;
background: beige;
padding: 1.2em;
width: 36em;
}
.myForm > label,
.myForm > fieldset {
grid-column: labels;
grid-row: auto;
}
.myForm > input,
.myForm > select,
.myForm > textarea {
grid-column: controls;
grid-row: auto;
padding: .4em;
border: 0;
}
.myForm > fieldset,
.myForm > button {
grid-column: span 2;
}
.myForm > button {
padding: 1em;
background: darkkhaki;
border: 0;
color: white;
}
.myForm > textarea {
min-height: 3em;
}
</style>
<form class="myForm">
<label for="customer_name">Name </label>
<input type="text" name="customer_name" id="customer_name" required>
<label for="phone_number">Phone </label>
<input type="tel" name="phone_number" id="phone_number">
<label for="email_address">Email </label>
<input type="email" name="email_address" id="email_address">
<fieldset>
<legend>Which taxi do you require?</legend>
<label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
<label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
<label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
</fieldset>
<fieldset>
<legend>Extras</legend>
<label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
<label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
<label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
</fieldset>
<label for="pickup_time">Pickup Date/Time</label>
<input type="datetime-local" name="pickup_time" id="pickup_time" required>
<label for="pickup_place">Pickup Place</label>
<select name="pickup_place" id="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Taxi Office</option>
<option value="town_hall" >Town Hall</option>
<option value="telepathy" >We'll Guess!</option>
</select>
<label for="dropoff_place">Dropoff Place</label>
<input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">
<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
<label for="comments">Special Instructions</label>
<textarea name="comments" id="comments" maxlength="500"></textarea>
<button>Submit Booking</button>
</form>Nested Grid
<!doctype html>
<title>Example</title>
<style>
#outer-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#outer-grid > div {
background-color: red;
color: white;
font-size: 4vw;
padding: 10px;
}
#inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
#inner-grid > div {
background: salmon;
padding: 10px;
}
</style>
<div id="outer-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div id="inner-grid">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>Repeating Grid
<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
#grid > div {
background-color: hotpink;
color: white;
font-size: 4vw;
padding: 10px;
}
</style>
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>Repeating Grid with Span
<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
#grid > div {
background-color: hotpink;
color: white;
font-size: 4vw;
padding: 10px;
}
#grid > div:nth-child(1) {
grid-column: span 2;
}
#grid > div:nth-child(2) {
grid-row: span 4;
}
#grid > div:nth-child(9) {
grid-column: span 3;
}
</style>
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>PreviousAll CSS Grid Properties (ok)Next=== Start Điều quan trọng nhất cách chia cột và thay đổi vị trí ===
Last updated
Was this helpful?