行高度在CSS网格中扩展

Question

我已经为此工作了几个小时，并将问题简化了。 现在，我面对这种有趣的行为，即两行之间的间隙随着屏幕宽度的减小而增大。

如果有更好的方法来实现此设计，我会感到沮丧，并愿意完全重做它。

我尝试创建的设计：

我目前的进度：

 .grid2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; border: 1px solid red; max-width: 90rem; margin: auto; width: 90% } .blurb-text { font-size: 36px; color: #000; grid-row-start: 2; grid-column-start: 2; grid-column-end: 5; outline: 1px solid green; margin: 100px 0 0 50px; } .Jumbotext-1 { /*border: 2px solid red;*/ font-size: 156px; color: #000; font-family: Georgia, 'Times New Roman', Times, serif; outline: 1px solid green; grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; margin: 0; } .Jumbotext-2 { font-size: 156px; color: #000; font-family: Georgia, 'Times New Roman', Times, serif; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; outline: 1px solid green; margin: auto; } @media screen and (min-width: 320px) { .Jumbotext-1 { font-size: calc(156px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .Jumbotext-1 { font-size: 156px; } } @media screen and (min-width: 320px) { .Jumbotext-2 { font-size: calc(156px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .Jumbotext-2 { font-size: 156px; } } @media screen and (min-width: 320px) { .blurb-text { font-size: calc(36px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { .blurb-text { font-size: 36px; } } 

 <div class="grid2"> <div class="Jumbotext-1">Deliver a unique</div> <div class="Jumbotext-2">experience</div> <div class="blurb-text"> We can work together today<br> to create an exceptional product<br> that screams to the world,<br> I belong to you. </div> </div> 

我真的需要一些帮助，谢谢您的时间和考虑！

Answer 1

这看起来更像是使用float的候选对象。

 body { background: black; color: white; } .container { max-width: 1040px; } .blurb-text { font-size: 36px; float: right; width: 35%; padding-top: 20px; } .Jumbotext-1 { display: inline; font-size: 120px; line-height: 0.9; font-family: Georgia, 'Times New Roman', Times, serif; margin: 0; width: 60%; } .ub { display: block; margin-top: 10px; font-weight: bold; } 

 <div class="container"> <div class="Jumbotext-1">Deliver a unique experience</div> <div class="blurb-text"> We can work together today to create an exceptional product that screams to the world, <span class="ub">I belong to you.</span> </div> </div> 

或内联块

 body { background-color: black; color: white; } .container { max-width: 1040px; } .blurb-text { font-size: 36px; line-height: 1.2; display: inline-block; width: 35%; padding-top: 20px; vertical-align: top; } .Jumbotext-1 { font-size: 120px; line-height: 0.9; font-family: Georgia, 'Times New Roman', Times, serif; margin: 0; } .ub { display: block; margin-top: 20px; font-weight: bold; } 

 <div class="container"> <p class="Jumbotext-1">Deliver a unique experience <span class="blurb-text">We can work together today to create an exceptional product that screams to the world, <span class="ub">I belong to you.</span></span> </p> </div> 

Answer 2

这是CSS Grid的粗略修订：

jsFiddle演示

 div { display: grid; grid-template-columns: repeat(10, 10vw); grid-template-rows: repeat(10, auto); height: 100vh; align-items: center; } span:nth-child(1) { grid-column: 1 / -1; font-size: 10vw; align-self: end; white-space: nowrap; } span:nth-child(2) { grid-column: 1 / 6; font-size: 10vw; } span:nth-child(3) { grid-column: 6 / -1; grid-row: 2 / 3; font-family: arial; font-size: 2vw; } body { margin: 0; padding: 0 3em; font-family: georgia; background-color: #222; color: #fff; } 

 <div> <span>Deliver a unique</span> <span>experience</span> <span>We can work together today<br>to create an exceptional product<br>that screams to the world:<br><br><strong>I belong to you.</strong></span> </div>