0

我正在使用网格布局重新设计一个网站。一些页面有一个main和一个aside文本元素full-width框，当主要焦点是连续文本时，其他页面有一个框（想想条款和条件等）。我想遵循关于字符宽度的最佳实践。这个想法是，在更大的屏幕上main-aside页面，与页面相比，整体结果将提供更宽的full-width页面。到目前为止，我通过使用两个包装器（参见下面的 CSS）来相当静态地执行此操作。

main这通常有效，但边距、填充以及图像和引用块处理增加了进一步的复杂性，在使用-aside设置时还不是很理想。我一直在考虑使用 Java 来准确计算这一点，但也许有一些 CSS-grid 或其他设置我还不知道我可以利用这些设置来使这项工作顺利而不笨重？或者我是在找错树，并用这种方法使事情变得过于复杂（毕竟我还在学习）？

#wrapper { /* holding main & aside text */
   max-width: 130ch;
   width: 100%;
   margin: auto;
   (…)
 }

#wrapper-full { /*holding full-width text */
   max-width: 90ch;
   width: 100%;
   margin: auto;
   (…)
 }

#wrapper, #wrapper-full  {
        display:grid;
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-column-gap: 5ch;
        grid-template-areas: 
            "hd hd hd hd hd hd hd had" /* hd = header */
            "le le le le ri ri ri ri" /*le = left; ri = right */
            "ft ft ft ft ft ft ft ft"; /* ft= footer */
    }

aside {
    grid-area: ri; /* handle grid layout for medium/large devices */
    margin-right: 5ch;
    (…)
}

main {
    grid-area: le; /* handle grid layout for medium/large devices */
    margin-left: 5ch;
    (…)
}

.full_width {
       grid-column-start: 1;
       grid-column-end: eight;
       (…)
   }

提前感谢您的任何指示和建议。

4

0 回答 0