CSS Grid

Table Of Contents

• What is CSS Grid?

• What is a Grid Container?

• Properties of a container

• Items in a Grid

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.

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%;
}

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;

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;

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;

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;

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;

We used this to center the items within our containers.

The Best CSS Grid Holiday Card(Figma)

The Best CSS Grid Holiday Card(Web Page)

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.