DEV Community 👩‍💻👨‍💻

Cover image for CSS Grid
mmiranda9902
mmiranda9902

Posted on • Updated on

CSS Grid

Table Of Contents

What is CSS Grid

CSS Grid is a grid based system that enables the user to simplify the design of two dimensional grid based user interfaces. CSS grid also allows the user to use other similar grid system such as Flexbox. The main difference between the two systems is CSS grid allows two dimensional Functionality. In other words, you can combine rows and columns with CSS grid while Flexbox leaves you stuck with deciding between rows or columns.
CSS Grid

What is a Grid Container?

.container1 {
  display: grid;
  background-color: rgba(244, 238, 183, 1);
  height: 600px;
  width: 450px;
  margin: auto;
  border: 35px solid rgba(181, 8, 8, 1);
  background-image: url("https://i.pinimg.com/originals/74/6a/1d/746a1d1d26304d1bad22f19f3cc93a51.png");
  background-size: 100% 100%;
  grid-template-rows: 250px 200px 100px 20px;
  padding: 18%;
}
Enter fullscreen mode Exit fullscreen mode

Grid container is when the display property is set as grid or inline grid. The grid container is what can be known as the parent which contains smaller grids within. This means it defines properties for the entire grid.

When making this container, we kept in mind that it was to like as much like a holiday card as possible. With that in mind we styled the container to have the card feel by adding a border and a picture with text within that container.

Properties of a Container.

grid template- columns &/or rows

grid-template-rows: 250px 200px 100px;
  grid-template-columns: 450px 450px;
Enter fullscreen mode Exit fullscreen mode

This is from our second and third page of our holiday card. As you can see the rows and columns each have their own size to which we can work with inside the grid! Since this is our Second and third page, we doubled the length of our first container to give it that opened card look.

gap:

gap: 15px;
Enter fullscreen mode Exit fullscreen mode

This gap was used for spacing and organization for our card. We didn't want the card to be squished together and hardly readable so we created this gap between each grid in order to keep everything organized.

display

display: grid;
Enter fullscreen mode Exit fullscreen mode

Display was used in each of our containers in order to allow us to insert our grids.

Items in a grid

Items in a grid are the children of the container. It defines the properties of individual items of grids like the length, height, area, and position.

Grid Item Properties

grid- column or grid- row: This is where the grid item begins and ends depending on the number of columns or rows in the grid.

grid-row: 1 / 3;
Enter fullscreen mode Exit fullscreen mode

justify or align-self: Aligns the grid horizontally or vertically depending on if the code reads either justify (horizontally) or align (vertical). This works on individual grid items.

justify-self: center;
Enter fullscreen mode Exit fullscreen mode

We used this to center the items within our containers.

The Best CSS Grid Holiday Card(Figma)

Alt Text

The Best CSS Grid Holiday Card(Web Page)

Alt Text
Alt Text

Conclusion

In conclusion the holiday card we created used a multitude of elements involving CSS grid. In my opinion I feel this method is much more effective than a method such as flexbox because this makes me feel as if I have more control over my project.

Top comments (0)

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. 🛠