HTML Tutorial: How to Use Grid Layout for Grid Adaptive Grid Layout

HTML tutorial: How to use Grid layout for grid adaptive grid layout, specific code examples are required

Introduction:
With the development of the Internet, web pages Layout is becoming increasingly important. Traditional web page layout methods, such as using tables or floating layouts, often require a lot of code and adjustments to achieve adaptive effects. The Grid layout introduced in CSS3 provides a more concise and flexible way to build a grid-adaptive grid layout. This article will introduce you to the basic concepts and practical applications of Grid layout, and provide you with specific code examples.

1. Grid layout introduction
   Grid layout is a new grid layout system in CSS3. It can divide the content of the web page into rows and columns to create a grid layout. Grid layout can be implemented through two parts: grid container and grid item. The grid container is the parent element containing the grid item, and the grid item is the child element under the grid container.
2. Create a grid container
   First, we need to define an element as a grid container. In HTML, you can use a <div> element to act as a grid container. As shown below: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container&quot;&gt; &lt;!-- 网格项 --&gt; &lt;div class=&quot;item1&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;item2&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;item3&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;item4&quot;&gt;4&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div><ol start="3"><li>Define grid layout<br>By setting CSS properties for the grid container<code>display: grid;, we can define it as a grid Grid layout. In addition, you can also use the grid-template-columns and grid-template-rows properties to specify the number of columns and rows of the grid. For example, the following code defines the grid container as a grid layout with 3 columns and 2 rows.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

4. Set the position and size of the grid item
   By setting the CSS properties grid-column and grid-row## for the grid item #, we can specify the position of each grid item in the grid layout. For example, the following code would place grid item 1 in the first row of the first column, grid item 2 in the first row of the second column, grid item 3 in the second row of the third column, and grid item 4 in the Second row of first column.

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2;
}

.item4 {
  grid-column: 1;
  grid-row: 2;
}

Adaptive Grid Layout
5. In Grid layout, the size and position of grid items can be adjusted adaptively. We can use the
   grid-template-areas attribute to specify the position of each grid item in the grid layout and represent spaces by using the . character. For example, the following code defines the grid container as a grid layout with two columns and two rows, and places each grid item in a different position.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}

Responsive Grid Layout
6. Grid layout can also easily implement responsive grid layout. We can use CSS media queries to adjust the style of the grid layout according to different screen sizes and device types. For example, the following code will change the grid layout to a single column layout when the window is smaller than 600px.
   

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

Conclusion:

Grid layout provides a concise and flexible way to implement grid-adaptive grid layout. By using grid containers and grid items, we can easily create complex web layouts and adapt them to different screen sizes and device types with adaptive and responsive features. I hope this article can help you understand and apply Grid layout and write a more flexible and beautiful web page layout.

Reference code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .item1 {
      grid-column: 1;
      grid-row: 1;
      background-color: red;
    }

    .item2 {
      grid-column: 2;
      grid-row: 1;
      background-color: green;
    }

    .item3 {
      grid-column: 1 / span 2;
      grid-row: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>

CSS file (style.css):

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
  background-color: green;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
  background-color: blue;
}

The above is an HTML tutorial on how to use Grid layout for grid-adaptive grid layout. Hope it helps. Remember, flexible use of Grid layout can bring better user experience and aesthetics to your web pages. Start trying to use Grid layout!

The above is the detailed content of HTML Tutorial: How to Use Grid Layout for Grid Adaptive Grid Layout. For more information, please follow other related articles on the PHP Chinese website!