DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CSS Grid Blog
Lucas Hurley
Lucas Hurley

Posted on • Updated on

CSS Grid Blog

What is CSS Grid?

CSS Grid Layout is a two-dimensional grid-based layout system. CSS grid is used to lay out web pages. Grid is the very first CSS module created to solve the layout problems people have all been coding around. Grid comes with a powerful auto-placement algorithm, which makes it easier to fill up available space. Grid was created to be very flexible and provide solutions for many different cases, and it is not something that we can just pick up and use in a day.

The Basic Elements

  1. Columns
  2. Rows
  3. Cells
  4. Grid Lines
  5. Gutter/Gaps

Alt Text

How to Use CSS Grid?

  1. Create a container div that will contain all grid elements.
  2. Add display: grid in your style.css container.
  3. Add grid-template-columns:, then the size of the grid (You can also use grid-template-rows)
  4. Create the elements that will go within the container div.
  5. You're done!

Tips While Using CSS Grid

  1. Add specified sizes for all of the grid items using a grid-item class as well as setting width: px and height: px.
  2. Add grid padding between grid items using grid-column-gap: px, grid-row-gap: px, and grid-gap: px.
  3. Change grid column width by changing the auto's at the end of grid-template-columns.
  4. Use justify-content to horizontally space the elements as you may please, such as justify-content: space-evenly.
  5. Use align-content to vertically space the elements as you may please, such as align-content: center.

Making Grids While Not Using display: grid

  1. Make each element that is non-uniform have a unique class, such as item1, item2, item3, etc.
  2. Define the Number of columns for elements to span using grid-column: 1 / 3 or grid-column: 1 / span 3.
  3. Number of rows for elements to span using grid-row: 1 / 3 or grid-row: 1 / span 3.
  4. 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.

Alt Text

Figma Examples

Figma can be used for many different website ideas and templates. It helps us create layouts that can be redefined and reshaped. It can be used for a Halloween Costume website template or even an evil periodic table.

Alt Text

Alt Text

Alt Text

CSS Grid Example

After using figma to make a website template, you can use CSS Grid to make the template come alive!

Alt Text

https://css-grid.peteraller.repl.co/

Use of CSS Grid In Example

To format the example above, we made each space and used CSS grid to align the spaces to their appropriate locations. We repeated this for all of the spaces that were needed:

<div class="element zone noble" style="grid-column: 18;">
            <div class="inside">
                <div class="title ">He</div>
                <div class="desc">Helium</div>
            </div>
        </div>
Enter fullscreen mode Exit fullscreen mode

The CSS elements created the basic periodic format:

.periodic-table{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(18, 1f);
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

CSS grid is an amazing tool all web developers should take advantage of. Knowing the basics of CSS Grid is only half of the practice, the other half comes from actual usage in a website. CSS grid uses a very simple way for people to visualize formatting elements. CSS grid is useful for formatting the basic structure of any website. I hope everyone becomes comfortable and interested in CSS grid. After knowing that CSS grid is so useful, I can't wait to use it!

Definitions

CSS Grid: The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Grid Elements: A grid layout consists of a parent element, with one or more child elements.
Grid Columns: The vertical lines of grid items are called columns.
Grid Rows: The horizontal lines of grid items are called rows.
Grid Gaps: The spaces between each column/row are called gaps.
Grid Lines: The lines between columns are called column lines. The lines between rows are called row lines.
Grid Container: To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.
Grid-Template-Columns: The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column.
Child Element (Items): A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

References

https://gridbyexample.com/examples/
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.freecodecamp.org/news/intro-to-css-grid-layout/
https://developers.google.com/web/updates/2017/01/css-grid
https://learncssgrid.com/

Top comments (2)

Collapse
 
divinopudim profile image
Dial J For Jorge

Would you mind answering a question of mine? what is the difference betwen align content and justify content?

Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited on

justify-content aligns the grid-items along the x-axis (or inline-axis) and align-content aligns them along the y-axis (or block-axis).

That's the difference to Flexbox, where it's defined as main-axis (justify) vs. cross-axis (align), which is important because when you switch the direction of a flex-container (row -> column) they flip around.

It's also the same for -items and -self properties of justify and align in their scope.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›