Understanding and usage of grid layout in CSS layout--the layout of general news

grid layout

1. Refer to the documentation to understand the grid layout

CSS Grid is a two-dimensional layout system for the web. Using a grid, you can format your content into rows and columns. A grid is a layout pattern consisting of a series of horizontal and vertical lines.

Documentation link: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids

2. Analyze based on examples

Example link: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction

Here is the code to reproduce the example

(1) Example code

html code:

<div class="wrapper">
        <div class="box1">One</div>
        <div class="box2">Two</div>
        <div class="box3">Three</div>
</div>

css code:

.wrapper {
    
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    
    
    background-color: red;
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    
    
    background-color: brown;
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    
    
    background-color: gold;
    grid-row: 2;
    grid-column: 3;
}

Presentation effect: Insert image description here

(2) Step-by-step analysis of the code

1. Parent container code analysis

First set display: grid for the parent container; turn on the grid layout.
Set the number and width of rows and columns for the parent container to form a grid:
grid-template-rows: 100px 100px; means dividing the parent container into two rows, with the height of each row is 100px.

grid-template-columns: 1fr 1fr 1fr; means dividing the parent container into three columns, and the proportion of each column is 1, that is, 1/3 of the parent container. (fr units divide the available space proportionally)

grid-gap: 10px; indicates that the spacing between unit grids is 10px.

2. Parent container grid layout effect display

Insert image description here

3. Sub-element code analysis

Supplement: The grid -column attribute is the combined writing method of grid-column-start and grid-column-end, and grid-row is the combined writing method of grid-row-start and grid-row-end.

Right now:

.item-1 {
    
    
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
    
    
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

4. Analysis of sub-element icon effects

Insert image description here

3. Grid layout practice

(1) Requirements

According to the general news format requirements, the news cover picture is on the left, the upper and lower structures are divided on the right, and the detailed description is below the title.

(2) Analysis

Insert image description here

(3) Code implementation

html code:

 <div class="news">
        <img class="image" src="../assets/picture.png">
        <h2 class="title">新闻标题</h2>
        <p class="description">我是新闻详细描述呀呀呀呀呀呀呀呀呀。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</div>

css code:

.news {
    
    
    display: grid;
    /* 由分析图是三行，每行的高度按需自由发挥，这里写40px是因为图片高度定为120px了 */
    grid-template-rows: 40px 40px 40px;
    /* 由分析图是两列，其中第二列差不多是第一列的三倍，这里根据图片大小占比进行比例换算*/
    grid-template-columns: 120px 360px;
}

.image {
    
    
    width: 120px;
    height: 120px;
    grid-row: 1;
    grid-column: 1/2;
}

.title {
    
    
    margin: 0;
    grid-row: 1/2;
    grid-column: 2;
}

.description {
    
    
    text-align: start;
    word-wrap: break-word;
    margin: 0;
    grid-row: 2/3;
    grid-column: 2;
}

(4) Effect display

Insert image description here

These are just my basic understanding and usage. There are many properties about grid layout that you can read in the documentation to understand. Let’s continue learning together! ! !