Day #4 of learning in public

Today I learned about grids in #css. I made my own custom grid on my project.

What is grid?

CSS Grid Layout, a powerful and flexible layout system that allows you to create two-dimensional grid structures for arranging and positioning elements in a web page. CSS Grid is designed to simplify complex layout tasks and provides fine-grained control over the placement of content within a grid.

Here's a brief summary of the grid property in CSS:

• Grid Container: The element with display: grid; becomes a grid container, defining the context for the grid layout.
• Grid Items: Child elements of the grid container are referred to as grid items and can be placed anywhere within the grid.
• Grid Rows and Columns: You can define the number of rows and columns in the grid using properties like grid-template-rows and grid-template-columns.
• Grid Gaps: You can specify the gap (space) between rows and columns using properties like grid-row-gap and grid-column-gap.
• Grid Placement: You can control the placement of grid items using properties like grid-row and grid-column, allowing you to position items in specific cells or spanning multiple cells.
• Responsive Layouts: CSS Grid allows for responsive design by using media queries and defining different grid structures for various screen sizes.
• Auto Placement: You can use the grid-auto-flow property to control how additional items are placed within the grid.
• Alignment: CSS Grid provides alignment properties like justify-items, align-items, justify-content, and align-content to fine-tune the alignment of grid items.

.grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr;Two rows with relative sizes
  grid-template-columns: 1fr 2fr 1fr; Three columns with relative sizes
}
.grid-container {
  grid-row-gap: 10px;
  grid-column-gap: 20px;
  /* OR shorthand */
  grid-gap: 10px 20px;
}