Skip to main content
Practice

Practice Template Grid Layout

How is the grid layout used in the practice template?


.grid​

.grid {
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(280px, auto);
  grid-gap: 14px;
}

  • display: grid;: This makes the element a grid container. The child elements within the grid container become grid items.

  • grid-template-columns: repeat(2, 1fr);: Creates 2 columns (vertical axis) of equal size (1fr means splitting the available space into 2 equal parts).

  • grid-auto-rows: minmax(280px, auto);: Sets the minimum height of rows (horizontal axis) to 280px and the maximum height automatically adjusts.

  • grid-gap: 14px;: Sets the spacing between grid items to 14px.


.grid-image and .grid-video​

.grid-image {
  cursor: pointer;
}

.grid-video {
  object-fit: cover;
}

  • .grid-image: Changes the cursor to a pointer when hovering over the image to indicate it's clickable.

  • .grid-video: Adjusts the video size to cover and fit neatly within the grid cell.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.