https://github.com/luissantiagodev/css-grid-study-note

Wesbos css grid course
https://github.com/luissantiagodev/css-grid-study-note

css grid grid-layout

Last synced: 7 days ago
JSON representation

Wesbos css grid course

• Host: GitHub
• URL: https://github.com/luissantiagodev/css-grid-study-note
• Owner: luissantiagodev
• Created: 2018-01-19T00:46:55.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-19T00:47:25.000Z (about 7 years ago)
• Last Synced: 2024-11-14T09:34:32.051Z (2 months ago)
• Topics: css, grid, grid-layout
• Homepage:
• Size: 1000 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Grid Course

### Css Fundamentals

What is  a grid in CSS

The main idea of grid is slicing a main div into columns and rows. Once you do that you can insert elements into any place of the grid.

### Main properties of Grid

```



    
1

    
2

    
3

    
4

    
5

    
6

    
7

    
8

    
9

    
10
 

  

  ````

```

.container{

    display: grid;

    grid-template-columns: 200px auto 50px;

    grid-gap: 20px;

  }

```


#### If you don't implecity define de number of columns it will explicitly define it as one.

### CSS attributes

This makes de container into a grid layout.

```

display: grid;

```

This makes the item inside the grid have a margin or space between the elements

```

grid-gap: 20px;

```

This makes the the first two columns have a width of 400px and 200px , the rest that are implecitly created will be shown into de bottom as a row.

```

grid-template-columns: 400px 200px;

```

This makes the grid elements be placed into a certain pattern which is column or row.

```

grid-auto-flow: column;

```

All of the items that are generated implecitly are going to have a width of 200px 

```

grid-auto-columns: 200px;

```

## Giving a real size to our grid

Fractional Unit - Represents the amount of space left

### example used in CSS

`1 fr`

Usage

`grid-template-columns:  1fr;`

The repeat function can help ous out typing less code to achive the same result

normal way : 

```

grid-template-columns: 1fr 1fr 1fr 1fr;

```

better way : 

```

grid-template-columns: repeat(4,1fr);

```

This is for position more than one spot to an element on the grid layout

```

grid-column: span 10;

grid-row: span 2;

```