关于html：在CSS元素网格中对齐文本


Align text in CSS element grid

本问题已经有最佳答案，请猛点这里访问。

我已经创建了这个CSS网格。我仍然在练习使用CSS网格，所以我尝试模仿这个网站。我希望将文本放置在与链接到的模板相同的位置。

但正确的方法是什么呢？此时连杆在左上角。

我应该在第一个DIV标记中创建另一个DIV吗，或者最好的方法是什么？

最好的问候。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.wrapper {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
  }

  .wrapper > div {
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  }

  .wrapper > div:nth-child(odd) {
    background-color: #ddd;
  }

  .item1 {
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
  }
  .item2 {
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  }
  .item3 {
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
  }
  .item4 {
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  }
  a {
    font-size: 30px;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    }
    .item2 {
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    }
    .item3 {
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
    }
    .item4 {
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    }
  }
   
    /*
    .nested {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    }
    .nested > div {
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    }
    */
1
2
3
4
5
6
7
8
9
10
11
12
      Watch a tiny cat taking a bath
   
   
      Spain: Take a virtual tour
   
   
   
      5 Tips to create your garden
   
   
   
      10 Movies you need to see

相关讨论

将此添加到项目

1
2
3
display: flex;
justify-content: flex-end;
flex-direction: column;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.wrapper {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
  }

  .wrapper > div {
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  }

  .wrapper > div:nth-child(odd) {
    background-color: #ddd;
  }

  .item1 {
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
  .item2 {
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  }
  .item3 {
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
  }
  .item4 {
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  }
  a {
    font-size: 30px;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    }
    .item2 {
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    }
    .item3 {
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
    }
    .item4 {
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    }
  }
   
    /*
    .nested {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    }
    .nested > div {
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    }
    */
1
2
3
4
5
6
7
8
9
10
11
12
      Watch a tiny cat taking a bath
   
   
      Spain: Take a virtual tour
   
   
   
      5 Tips to create your garden
   
   
   
      10 Movies you need to see

相关讨论