![CSS Grid img](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/334a08d2-4cad-470f-ade4-9f3283ad3ba4/mrh-css-grid-fig-02-800w-opt.png) #What is CSS Grid? - A way to organize elements in HTML. - A more in-depth alternative to flex-box. - A more stripped-down version of Bootstrap columns. #How do I use CSS Grid? 1. Make a container div that will contain all grid elements. 2. Add to the CSS of the container, `display: grid` or `display: inline-grid` (if you want an inline grid) as well as `grid-template-columns: auto auto auto`, with the autos being the number of columns (change it to a number to specify a column width) 3. Create the elements (ideally divs) that will go within the container div. 4. You're now done! ![CSS Grid img](https://www.w3schools.com/css/grid_gaps.png) ###While this grid technically works, there are a few things you may want to add to make the grid more specified to your needs. - Adding specified sizes for all of the grid items using a `grid-item` class as well as setting `width: px` and `height: px`. - Adding grid padding between grid items using `grid-column-gap: px`, `grid-row-gap: px`, and `grid-gap: px`. - Changing grid column width by changing the auto's at the end of `grid-template-columns`. - Using justify-content to horizontally space the elements as you may please, such as `justify-content: space-evenly`. - Using align-content to vertically space the elements as you may please, such as `align-content: center`. #Making grid non-uniform Many times, you won't want the automatically space and sized grids that css-grid can produce, instead you may want a grid that doesn't follow the rules of `display: grid`. 1. Make each element that is non-uniform have a unique class/id, such as `item1`, `item2`, `item3`, etc. 2. From this point you can define: - Num. of columns for elements to span using `grid-column: 1 / 3` (goes from col. 1 to col. 3) or `grid-column: 1 / span 3` (spans from col. 1 for 3 col.'s). - Num. of rows for elements to span using `grid-row: 1 / 3` (goes from row 1 to row 3) or `grid-row: 1 / span 3` (spans from row 1 for 3 rows). - For the *most* precision, define the entire area using `grid-area: 1 / 3 / 3 / 4`, where the element goes from row 1, col. 3 to row 3, col. 4 (you can use span as well). #Template area To define the space an element takes up you can use `grid-template-areas: area1 area2 area3` in the container, and `grid-area: area2` in the grid item. - You can use periods instead of area names if they are not relevant to the area names you are using (`grid-template-areas: area1 area1 . .`) - You can use this for rows as well such as: ```css grid-template-areas: 'header header subtitle' 'content content content' 'footer name company' ``` #CSS Grid Example Made in Figma ![CSS Grid img](https://i.imgur.com/GxkshGN.png) Example after being made in HTML, CSS, and Javascript: (with clickable advent days) ![CSS Grid img](https://i.imgur.com/APq98oH.png) #Use of CSS Grid in Project Me and my groupmate used CSS Grid everywhere. Almost all formatting is based on CSS Grid. Even things that wouldn't normally be thought of to be CSS Grid are, in fact, CSS Grid. ###Use in Whole Calendar To format the entire calendar, we used CSS Grid. This is possibly the most obvious use in the website, since all the elements are literally in the shape of a grid. The hierarchy of the elements is as follows: ```html

``` As you can see, we are using flex box to center the entire thing, a grid container to contains all grid elements, sub grid-containers to contain each tile and hidden image, and grid-content to contain both the background and body text. ###Grid Tile We use CSS Grid even in elements with only one child, but why is that? Well, using Grid's align-items property, we can easily vertically align text which is normally a pain in normal HTML. The reason the image and content are separate is so they can have different levels of opacity. Oh, and all these tiles (31, 1 for each day) are generated purely by JS in one for-loop. This means they all share the same properties and don't clog up the main HTML page. ###Javacsript The main use of Javascript is to generate the tiles and make it so when clicked on, they reveal an image behind them. The first is pretty standard, with createElement and appendChild used to create and append the main containers. The code for revealing the image works by having an event listener and changing the opacity values for the content and image to be toggled when clicked on. ```js gridSub.addEventListener('click', function() { hideOnClick(gridSub); }); ``` Finally, to make sure each tile has an image in a easily modifiable way, we have a list of strings that are image links so that each tile at each index has an image at the same index. ```js var imgList= [ "santa.png", "elf.png", ... ]; for (let i = 0; i < imgList.length; i++) { gridImg.src = imgList[i]; } ``` #Conclusion CSS grid is one more tool in a web developer's toolbelt. Knowing the info is only half of the practice, the other half comes from actual usage in a website. However, unlike other tools in the toolbelt, CSS grid uses a very logical and easy to visualize way of formatting elements, which alleviates the headaches of things like `float: left` and `position: absolute`. It is incredibly useful for formatting the basic structure of any website and I can't wait to use it in one.

mranderson455

CSS Grid Blog Post

Join Our Newsletter. No Spam, Only the good stuff.