Intro to grid

This grid stuff in CSS is confusing, can someone help thanks.

5 Likes

Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Unlike with an HTML table-based layout , you can layer items on the grid.

For example, you can make grids with rows and columns.

.grid-container {
  display: grid;
}

and of course have to ability to make gaps in the grid you can make.

.grid-container {
display: grid;
 grid-column-gap: 50px;
}

There are also headers (top of page), footers (bottom of page), just as an example. The grids overall are here to help you organize your your code into boxes. If you need help with any of the grid code, let me know so I can help.

6 Likes