Skip to content

CSS Grid #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

CSS Grid #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
14a41e3
feat(cssgrid): grid fundamental
jscodelover Jun 29, 2019
fe2b075
feat(cssgrid): grid item placing
jscodelover Jun 29, 2019
389ac8e
feat(cssgrid): grid-sizing-items
jscodelover Jun 29, 2019
918c86f
feat(cssgrid): grid-template-areas
jscodelover Jun 29, 2019
71b31b6
feat(cssgrid): name grid line
jscodelover Jun 29, 2019
578882f
feat(cssgrid): explicit and implicit track
jscodelover Jun 29, 2019
3235736
feat(cssgrid): alignment and centering
jscodelover Jun 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions cssGrids/01/index.html
View file
Open in desktop

This file was deleted.

43 changes: 0 additions & 43 deletions cssGrids/01/style.css
View file
Open in desktop

This file was deleted.

99 changes: 99 additions & 0 deletions cssGrids/grid-alignment-&-centering.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Alignment and Centering</title>
<style>
body{
font-size: 30px;
}
.container{
display: grid;
height: 500px;
grid-template-columns: repeat(5, 150px);
grid-template-rows: 100px 100px;
grid-gap: 10px;
border: 10px solid var(--yellow);
}
.container1{
justify-content: center;
align-content: center;
}
.container2{
align-items: center;
justify-items: start;
}
.c1, .c2{
width: 100px;
background-color: chartreuse;
}
.c2{
align-self: center;
justify-self: center;
}
</style>
</head>
<body>
<div>
<p><u><i>justify-content</i> and <i>align-content</i></u></p>
<p>
Sometimes the total size of your grid might be less than the size of its grid container. In this case you can set the
alignment of the grid within the grid container. <u><i>justify-content</i></u> property aligns the grid along the
inline (row) axis and <u><i>align-content</i></u> which aligns the grid along the block (column) axis).
</p>
<div class="container container1">
<div class="c1 itm1">1</div>
<div class="c1 itm2">2</div>
<div class="c1 itm3">3</div>
<div class="c1 itm4">4</div>
<div class="c1 itm5">5</div>
<div class="c1 itm6">6</div>
<div class="c1 itm7">7</div>
<div class="c1 itm8">8</div>
<div class="c1 itm9">9</div>
<div class="c1 itm10">10</div>
</div>
</div>
<div>
<p><u><i>justify-items</i> and <i>align-items</i></u></p>
<p>
<u><i>justify-items</i></u> aligns grid items along the inline (row) axis and <u><i>align-items</i></u> which aligns
along the block (column) axis). These value applies to all grid items inside the container.
</p>
<div class="container container1 container2">
<div class="c1 itm1">1</div>
<div class="c1 itm2">2</div>
<div class="c1 itm3">3</div>
<div class="c1 itm4">4</div>
<div class="c1 itm5">5</div>
<div class="c1 itm6">6</div>
<div class="c1 itm7">7</div>
<div class="c1 itm8">8</div>
<div class="c1 itm9">9</div>
<div class="c1 itm10">10</div>
</div>
</div>
<div>
<p><u><i>justify-self</i> and <i>align-self</i></u></p>
<p>
<u><i>justify-self</i></u> aligns a grid item inside a cell along the inline (row) axis and <u><i>align-self</i></u>
which aligns along the block (column) axis). This value applies to a grid item inside a single cell.
</p>
<div class="container container1 container2">
<div class="c2 itm1">1</div>
<div class="c2 itm2">2</div>
<div class="c2 itm3">3</div>
<div class="c2 itm4">4</div>
<div class="c2 itm5">5</div>
<div class="c2 itm6">6</div>
<div class="c2 itm7">7</div>
<div class="c2 itm8">8</div>
<div class="c2 itm9">9</div>
<div class="c2 itm10">10</div>
</div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions cssGrids/grid-fundamental.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Grid Fundamental</title>
<style>
.container{
display: grid;
grid-template-columns: 100px 100px 100px; /* fr is the good unit value for grid */
grid-template-rows: auto;
grid-gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</body>
</html>
70 changes: 70 additions & 0 deletions cssGrids/grid-implicit-and-explicit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Implicit and Explicit Tracks</title>
<style>
body{
font-size: 30px;
}
.container1{
display:grid;
grid-template-columns: 200px 100px;
grid-template-rows: 100px 200px; /* rows after 2 have implicit track */
grid-gap:20px;
/* grid-auto-rows: 100px; */
grid-auto-rows: 50px 100px; /* implicit rows will have these height */
}
.container2{
margin-top: 20px;
display:grid;
grid-template-columns: 200px 100px;
grid-gap:20px;
grid-auto-flow:column;
grid-auto-columns: 50px 100px;
}
</style>
</head>
<body>
<div>
<p> Implicit means that they are created automatically. Explicit means the row and column we have defined.</p>
<p>In grid we have <code>grid-auto-flow: row</code> as default which means new element will move to the row by default. But we can
move auto flow to column using <code>grid-auto-flow: column;</code></p>
<br />
<p>grid-auto-rows and grid-auto-columns specifies the size of an implicitly-created grid row and column track. </p>
<br />
<p>with grid-auto-flow set to row we can set the value of implicitly created row.</p>
<pre>
<code>grid-auto-flow: row</code>
<code>grid-auto-rows: 100px</code>
</pre>
<p>with grid-auto-flow set to column we can set the value of implicitly created column.</p>
<pre>
<code>grid-auto-flow: column</code>
<code>grid-auto-columns: 100px</code>
</pre>
</div>
<div class="container1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="container2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>


42 changes: 42 additions & 0 deletions cssGrids/grid-line-name.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Name Lines in CSS Grid</title>
<style>
body{
font-size: 30px;
}
.container{
display: grid;
grid-template-columns: [sidebar1] 1fr [content1 content-start] 2fr [content2] 1fr [sidebar2];
grid-template-rows: [start-row] 100px [middle-row] 100px [end-row];
grid-gap: 20px;
}
.item1{
grid-row: start-row/end-row;
}
.item2{
grid-column: content-start/sidebar2;
}
</style>
</head>
<body>
<div>
<p>
We can name the grid line by specifying the name in square brackets eg [name] in <i>grid-template-columns</i>
and <i>grid-template-rows</i>
</p>
<p>We can have multiple name for a line eg- [name name].</p>
</div>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
</body>
</html>
69 changes: 69 additions & 0 deletions cssGrids/grid-placing-items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Grid Placing Item</title>
<style>
body{
font-size: 30px;
}
.container{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 20px;
}
.item9{
grid-column-start: 4;
grid-column-end: 6;
/* grid-column: 4/6; shortform of the above*/
}
.item16{
grid-column: span 3/5;
grid-row: 4/6;
}
</style>
</head>
<body>
<div>
<p>
<i>grid-column</i> is shorthand for <i>grid-column-start</i> and <i>grid-column-end</i>. They are used to span the
element according to lines. We can use -1 for going to the end and -2 , -3 so on for second last and third last line.
</p>
</div>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
<div class="item item12">12</div>
<div class="item item13">13</div>
<div class="item item14">14</div>
<div class="item item15">15</div>
<div class="item item16">16</div>
<div class="item item17">17</div>
<div class="item item18">18</div>
<div class="item item19">19</div>
<div class="item item20">20</div>
<div class="item item21">21</div>
<div class="item item22">22</div>
<div class="item item23">23</div>
<div class="item item24">24</div>
<div class="item item25">25</div>
<div class="item item26">26</div>
<div class="item item27">27</div>
<div class="item item28">28</div>
<div class="item item29">29</div>
<div class="item item30">30</div>
</div>
</body>
</html>
Loading