How to use CSS Viewport units vh and vmax to implement adaptive grid layout

How to use CSS Viewport units vh and vmax to implement adaptive grid layout

In modern web design, adaptive layout is a crucial part. It enables web pages to have good readability and user experience on different screen sizes and devices. CSS Viewport units are a powerful tool for implementing adaptive layout. Among them, vh and vmax are two commonly used viewport units, which can help us implement adaptive grid layout in web design.

vh is the percentage unit of the viewport height, 1vh is equal to one hundredth of the viewport height. vmax is a percentage unit of the larger of the viewport width and height, and 1vmax is equal to one hundredth of the larger of the viewport width and height. Both units are extremely flexible and highly adaptable in adaptive layouts.

Below, we will explore how to use vh and vmax units to create an adaptive grid layout.

First, we need to set up a basic grid container. In HTML, we can use a div element as a container and set a class name for it, such as "grid-container". Then, in CSS, we can add styles to this class name to create a grid layout.

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #eee;
}

In the above code, we use CSS Grid (grid layout) to create a grid container with three columns, in which the child elements are divs with the ".grid-item" class name element.

Next, we will use vh and vmax units to make this grid layout adaptive.

First, let's set the height of the grid container. We can use vh units to specify that the container's height is a percentage of the viewport's height.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  height: 70vh;
}

In the above code, we set the height of the container to 70% of the viewport height. In this way, the height of the container will automatically adjust on different screen sizes.

Next, we can make the height of each cell of the grid layout adaptive by setting the height of the child element.

.grid-item {
  background-color: #eee;
  height: 100%;
}

In the above code, we set the height of the child element to 100%, so that the height of each cell will automatically adjust according to the height of the container.

In addition, we can also use vmax units to make the grid layout readable on screens with different aspect ratios. For example, if we want the width of each cell of the grid layout to be equal to the greater value of the height of the container, we can set it like this:

.grid-item {
  background-color: #eee;
  height: 100%;
  width: 100vmax;
}

In the above code, we set the width of the child element to 100vmax so that the width of each cell automatically adjusts to the larger of the viewport width and viewport height.

By using vh and vmax units, we can easily implement adaptive grid layout. This is very helpful in creating web designs with good readability and user experience. I hope the sample code in this article can inspire you to use Viewport units to implement adaptive grid layout in web design.

The above is the detailed content of How to use CSS Viewport units vh and vmax to implement adaptive grid layout. For more information, please follow other related articles on the PHP Chinese website!