CSS Grid 4列布局，其中2个列标题用于< dl>. [英] CSS Grid 4 column layout with 2 column titles for <dl>
问题描述
给出标记:
dl
dt
dd
dd
..
dt
dd
dd
...
我正在尝试使用CSS网格实现以下布局:
I'm trying to achieve the following layout with CSS grid:
dt dt
dd dd dd dd
dd dd dd dd
dd dd dd dd
dd dd dd dd
我目前的做法是:
.time-table {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"destination1 destination1 destination2 destination2"
"time time time time";
list-style: none;
padding: 0;
}
.time-table__time {
background-color: #34ace0;
display: block;
color: #fff;
margin: 0;
grid-area: time;
}
.time-table__destination::before {
content: '\021D2';
display: inline-block;
transform: translateX(-5px);
}
.time-table__destination1 {
grid-area: destination1;
}
.time-table__destination2 {
grid-area: destination2;
}
@media (max-width: 35em) {
.time-table {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"destination1 destination2"
"time time";
}
.time-table__destination::before {
transform: translateX(-5px);
}
}<dl class="time-table">
<dt class="time-table__destination time-table__destination1">Metsakooli</dt>
<dd class="time-table__time">23:22</dd>
<dd class="time-table__time">23:32</dd>
<dd class="time-table__time">23:42</dd>
<dd class="time-table__time">23:52</dd>
<dd class="time-table__time">00:02</dd>
<dt class="time-table__destination time-table__destination2">Männiku</dt>
<dd class="time-table__time">23:27</dd>
<dd class="time-table__time">23:37</dd>
<dd class="time-table__time">23:47</dd>
<dd class="time-table__time">23:57</dd>
<dd class="time-table__time">00:07</dd>
</dl>或者不使用网格的模板区域:
Or without using grid's template areas:
.time-table {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(4, 1fr);
list-style: none;
padding: 0;
}
.time-table__time {
background-color: #34ace0;
display: block;
color: #fff;
margin: 0;
}
.time-table__destination::before {
content: '\021D2';
display: inline-block;
transform: translateX(-5px);
}
@media (max-width: 35em) {
.time-table {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"destination1 destination2"
"time time";
}
.time-table__destination::before {
transform: translateX(-5px);
}
}<dl class="time-table">
<dt class="time-table__destination time-table__destination1">Metsakooli</dt>
<dd class="time-table__time">23:22</dd>
<dd class="time-table__time">23:32</dd>
<dd class="time-table__time">23:42</dd>
<dd class="time-table__time">23:52</dd>
<dd class="time-table__time">00:02</dd>
<dt class="time-table__destination time-table__destination2">Männiku</dt>
<dd class="time-table__time">23:27</dd>
<dd class="time-table__time">23:37</dd>
<dd class="time-table__time">23:47</dd>
<dd class="time-table__time">23:57</dd>
<dd class="time-table__time">00:07</dd>
</dl>但是如您所见，第一种方法无法在适当的路径标题下呈现不同的时间.第二种方法创建行，但是没有按正确的顺序列出它们，因此无法提升第二个标题().我的问题是:-如何使时间(< dd> )出现在它们各自的目的地/路线下?-是否有一种更优雅的方法来使第一行的单元格跨越2列，并让其余元素代替网格区域 time ，例如使用 grid-auto-rows ?(我敢打赌……)
But as you can see, the first approach fails to render the different times under the appropriate route title. The second approach creates the rows, but doesn't list them in the correct order and fails to hoist the second title (). My questions are:
- How can I make the times (<dd>) appear under their respective destination/route?
- Is there a more elegant way to have the first row's cells span 2 columns and have the rest of the elements take the place of grid area time, like using grid-auto-rows? (I bet there is...)
推荐答案
您提供的HTML的问题在于，无法将< dd> 元素与唯一元素相关联< dt> 元素， .time-table__time 元素应在其下对齐.
The problem with the HTML that you've provided is that there's no way of associating the <dd> elements with a unique <dt> element, under which the .time-table__time elements should be aligned.
使用JavaScript可以利用 order 属性来提供该视觉标识，但这是解决该问题的一种过度解决方案，可以通过更改HTML更好地解决该问题.
It is possible, with JavaScript, to take advantage of the order property to provide that visual identity, but it's an overwrought solution to a problem that can be better solved by changing the HTML.
使用 grid-template-areas 的问题是，您发现创建了一个跨越四列的命名区域.并且所有< dd> 元素都放置在该命名区域中.
The problem with using the grid-template-areas is, as you've found, that you create a named area that spans four columns; and all the <dd> elements are placed in that one named area.
下面的修订版HTML使用了两个< dl> 元素，每个元素都有自己的< dt> 和< dd> 后代将两者唯一地联系在一起；这些< dl> 元素本身包装在< li> 元素中，它们本身就是< ol> 元素的子代.这是因为您要显示的HTML–没有上下文–似乎是目的地的有序列表.
The revised HTML, below, uses two <dl> elements, each with its own <dt> and <dd> descendants to uniquely associate the two together; those <dl> elements are themselves wrapped in <li> elements, themselves the children of an <ol> element. This is because the HTML you're showing – without context – seems to be an ordered list of destinations.
我很想将< dl> 元素本身更改为< ol> 元素，因为它们似乎是有序的时间列表，尽管带有一个标题.但是，除了语义之外，以下是我对如何产生明显要求的建议:
I was tempted to change the <dl> elements themselves into <ol> elements, given that they seem to be ordered lists of times, albeit with a title. However, semantics aside, the following is my suggestion of how you can produce your apparent requirements:
/* Setting the margin and padding of all
elements to zero: */
*,
::before,
::after {
margin: 0;
padding: 0;
}
/* Adjust to taste: */
html,
body {
background-color: #fff;
}
/* Defining a custom CSS Property for
later use: */
:root {
--numParentColumns: 2;
}
/* Removing default list-styling: */
ol,
li,
dl,
dt,
dd {
list-style-type: none;
}
ol {
/* Setting the display type of the <ol> element
to that of 'grid': */
display: grid;
/* Defining the grid columns, using the previously-
defined --numParentColumns variable to supply the
integer to the repeat() function, and setting each
column to the width of 1fr: */
grid-template-columns: repeat(var(--numParentColumns), 1fr);
/* Adjust to taste: */
width: 90vw;
grid-column-gap: 0.5em;
margin: 0 auto;
}
ol>li dl {
/* Setting the <dl> elements' display to 'grid': */
display: grid;
/* Defining the number of grid columns to that value
held in the --numParentColumns variable, retaining
the 1fr width: */
grid-template-columns: repeat(var(--numParentColumns), 1fr);
grid-column-gap: 0.25em;
}
dt.time-table__destination {
/* Rather than using specific named grid-areas
here we place the <dt> elements in column 1
and span 2 columns: */
grid-column: 1 / span 2;
background-color: limegreen;
}
dt.time-table__destination::before {
content: '\021D2';
margin: 0 1em 0 0;
}
dd.time-table__time {
background-color: #34ace0;
}
/* in displays where the width is at, or below,
35em we update some properties: */
@media (max-width: 35em) {
dd.time-table__time {
/* Here we place the <dd> elements in the
first column and have them span 2
columns: */
grid-column: 1 / span 2;
}
}
/* At page-widths less than 15em (not mentioned in
the question): */
@media (max-width: 15em) {
/* We update the --numParentColumns variable to
1, as a tangential demonstration of how useful
CSS custom properties can be: */
:root {
--numParentColumns: 1;
}
}<ol>
<li>
<dl>
<dt class="time-table__destination time-table__destination1">Metsakooli</dt>
<dd class="time-table__time">23:22</dd>
<dd class="time-table__time">23:32</dd>
<dd class="time-table__time">23:42</dd>
<dd class="time-table__time">23:52</dd>
<dd class="time-table__time">00:02</dd>
</dl>
</li>
<li>
<dl class="time-table">
<dt class="time-table__destination time-table__destination2">Männiku</dt>
<dd class="time-table__time">23:27</dd>
<dd class="time-table__time">23:37</dd>
<dd class="time-table__time">23:47</dd>
<dd class="time-table__time">23:57</dd>
<dd class="time-table__time">00:07</dd>
</dl>
</li>
</ol>参考:
这篇关于CSS Grid 4列布局，其中2个列标题用于< dl>.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
