learning
/
css_grid
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
master
androiddrew 6 years ago
commit 7674608639
8 changed files with 354 additions and 0 deletions
Show Stats Download Patch File Download Diff File

65
Net_mag_tut/app.css
Unescape Escape View File

@ -0,0 +1,65 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
margin: 0;
font-size: 1.6rem;
font-family: Helvetica;
}
#container {
width: 100vw;
height: 100vh;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-template-rows: repeat(4, 75px); */
grid-template-rows: 70px 1fr 1fr 1fr 1fr 140px;
}
#item1 {
background-color: purple;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: -2;
}
#item2 {
background-color: green;
grid-column: 3;
grid-row: 1;
}
/*
Size can be any valid CSS unit px vw auto that enables a column or row to
stretch across available space
For example grid-template-column: 10px auto will create a 10px column followed
by a second column that fills all available space
fr is a fractional unit that causes any remaining space to be distributed
to columns or rows based on the ratios of these units
grid-template-rows: 1fr 2fr
creates two dynamic rows whith the second twice the size of the first,
grid-template-columns: 1fr 1fr 1fr 1fr
Defines four equal-sized columns
The `repeat()`function can be used to make the above less verbose repeat(4, 1fr)
*/

18
Net_mag_tut/index.html
Unescape Escape View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS Grid Demo</title>
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div id="container" class="grid">
<div id=item1>
Item 1 contents
</div>
<div id=item2>
Item 2 contents
</div>
</div>
</body>
</html>

79
README.md
Unescape Escape View File

@ -0,0 +1,79 @@
# CSS Grid
This repo houses a number of tutorials for using CSS Grid.
## Using the grid
Size can be any valid CSS unit `px`, `vw`, `auto` that enables a column or row to stretch across available space
For example `grid-template-column: 10px auto` will create a 10px column followed by a second column that fills all available space
`fr` is a fractional unit that causes any remaining space to be distributed to columns or rows based on the ratios of these units
```
grid-template-rows: 1fr 2fr
```
creates two dynamic rows with the second twice the size of the first,
```
grid-template-columns: 1fr 1fr 1fr 1fr
```
Defines four equal-sized columns
The `repeat()`function can be used to make the above less verbose `repeat(4, 1fr)`
## More complex layouts
Grids with unequal sized cells can be created by combining the different units mentioned. We can also use the `minmax()` function to define a minimum and a maximum size for dynamic columns and rows.
```
grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr))
```
Creates four rows with the first 40px tall, the other three stretch over remaining space in a 2:1:1 ratio. The last two having a minimum height of 75px which sets the minimum height of the second row at 150px.
## Layout
### Accessing the grid
*INSERT IMAGE OF GRID LINES*
We can consider this now to be a 2 x 2 array indexed at 1 and accessible with a negative index if necessary. For example a 4 x 4 Grid will have the first column accessible at either index 1 or -5. They can be used as the boundary lines for elements placed in them.
*NOTE* We can also assign a name to index by adding a string in square brackets in the property declarations
```
gird-template-rows: [first-row] 1fr [second-row] 1fr [last]
```
### Positioning elements inside the grid
*THIS IS GONNA HAVE TO BE REWRITTEN*
Similar to flexbox, the horizontal and vertical position of items placed in the grid can be controlled by setting `justify-items` and `align-items` respectively to `start`, `center`, or `stretch`.
The same control of grid column and row positions with in a larger container (grid inside a grid) can be applied used the `justify-content` and `align-content` properties and the `start`, `center`, or `stretch` values. The additional value `space-between` or `space-around` is used to divide extra space between columns/rows. `space-evenly` can used to divide extra space evenly between columns/rows with the same or half the amount of space on the ends.
We can also define `align-content` and `justify-content`(in that order) using `place-content`. Values of `align-items` and `justify-items` can be defined with `place-items` *WTF THIS GUY CAN'T WRITE*
### Positioning items in the Grid using line numbers
To place an item in the grid we can set it's `grid-column-start` and `grid-column-end` properties between which the item should be stretched. For rows the properties are `grid-row-start` and `grid-row-end`
```
#item1 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: -1;
}
#item2 {
grid-column: 3;
grid-row: 1;
}
```

120
dashboard_ex/index.html
Unescape Escape View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Tutorial</title>
<style media="screen">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
font-family: Helvetica;
height: 100%;
}
.grid-container {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 70px auto 50px;
}
.header {
background-color: #5C666F;
grid-column: 1 / -1;
box-shadow: 0 2px 2px 0 rgb(50,50,50, 0.15);
}
.menu {
background-color: #01B48F;
grid-column: 1 / 3;
box-shadow: 0 10px 10px 0 rgb(50,50,50, 0.50);
}
.menu > a {
display: block;
text-decoration: none;
color: #FFF;
text-align: center;
padding-top: 0.8em;
padding-bottom: 0.8em;
border-bottom: 1px solid #5C666F;
}
.menu > a:hover {
background-color: #FF9A57;
padding-left: 0.8em;
transition: all .15s ease-in-out;
}
.content {
color: #ffffff;
background-color: #F5F7F9;
padding: 1em 2em;
grid-column: 3 / -1;
justify-content: center;
align-items: center;
}
.footer {
background-color: #E3E5E7;
grid-column: 1 / -1;
}
nav {
padding-top: 1.3em;
text-align: center;
margin-left: auto;
margin-right: auto;
}
nav > a {
font-size: 1.2em;
font-weight: bold;
margin-right: 2rem;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
}
nav > a:last-child{
margin-right: 0;
}
nav > a:hover {
border-bottom: 3px solid #ffffff;
text-decoration: none;
transition: border-bottom .15s ;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="menu">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
<a href="#">Menu4</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

6
scrimba_tut/README.md
Unescape Escape View File

@ -0,0 +1,6 @@
# Scrimba Tutorial
Source:
https://scrimba.com/g/gR8PTE

31
scrimba_tut/basic.css
Unescape Escape View File

@ -0,0 +1,31 @@
.container > div {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
box-sizing: border-box;
background-color: #ffeead;
height: 100%;
padding: 10px;
margin: 0px;
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}

21
scrimba_tut/index.css
Unescape Escape View File

@ -0,0 +1,21 @@
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
}
.header {
grid-column: 1 / -1;
}
.menu {}
.content {
grid-column: 2 / -1;
}
.footer {
grid-column: 1 / -1;
}

14
scrimba_tut/index.html
Unescape Escape View File

@ -0,0 +1,14 @@
<html>
<head>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./basic.css">
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save