CSS Grid

Grid

.container {
  margin: 20px;
  display: grid;
  height: 100vh;
  /* grid-template-columns: 200px 2fr 20% 1fr; */
  grid-template-columns: repeat(4, [col-start] 20% [col-end]);
  /* grid-template-rows: 5rem minmax(3rem, 5.5rem); */
  /* rows with names */
  grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] minmax(3rem, 5.5rem) [row-2-end];
  column-gap: 10px;
  row-gap: 10px;
  /* justifying inner items in grid */
  justify-items: stretch;
  align-items: stretch;
  /* justifying the grid */
  justify-content: center;
  align-content: center;
}

Grid - Shorthand

.container {
  margin: 20px;
  display: grid;
  height: 100vh;
  /* grid-template-columns: 200px 2fr 20% 1fr; */
  grid-template-columns: repeat(4, [col-start] 20% [col-end]);
  /* grid-template-rows: 5rem minmax(3rem, 5.5rem); */
  /* rows with names */
  grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] minmax(3rem, 5.5rem) [row-2-end];
  gap: 10px;
  /* justifying inner items in grid */
  justify-items: stretch;
  align-items: stretch;
  /* justifying the grid */
  justify-content: center;
  align-content: center;
}

Grid Item

.el3 {
  background: rgba(0, 128, 0, 0.5);
  grid-column-start: 3;
  grid-column-end: 5; 
  /* grid-row-start: 1; */
  grid-row-start: row-1-start;
  grid-row-end: row-2-end;
  justify-self: center;
  align-self: center; 
}

Grid Item - Shorthand

.el3 {
  background: rgba(0, 128, 0, 0.5);
  grid-column: 3 / 5;
  grid-row: row-1-start / row-2-end;
  grid-area: row-1-start / 3 / row-2-end / 5;
  justify-self: center;
  align-self: center;
}

GitHub Repo

• CSS Grid Lab - GitHub

1. To view normal page - Demo : http://localhost:5173/
2. To view home page - Demo : http://localhost:5173/home/
3. To view media-query page - Demo : http://localhost:5173/media-query/
4. To view autoflow page - Demo : http://localhost:5173/autoflow/