Question

我在CSS网格布局中创建了6列。我在列表中有4个项目，但希望将这些项目放置在2-5列中。我该怎么办？

public Column makeJoinConditional(Dataset<Row> df1, Dataset<Row> df2, List<String> columnNames, Column c)  {

        if (c==null) {
            String  top = columnNames.get(0);
            columnNames.remove(0);
            Column first = df1.col(top).equalTo(df2.col(top));

            return makeJoinConditional(df1,df2, columnNames,first);

        } else {

            if (columnNames.size()==0) {
                return c;
            } else {
                String  top = columnNames.get(0);
                columnNames.remove(0);
                Column next = c.and( df1.col(top).equalTo(df2.col(top)) );
                return makeJoinConditional(df1,df2, columnNames,next);
            }
        }
    }

    public Dataset<Row> joinDataFrames(Dataset<Row> df1, Dataset<Row> df2, List<String> columns) {
        Column joinCols = makeJoinConditional(df1,df2,columns,null);
        return df1.join(df2,joinCols);
    }

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

Answer 1

您可以添加一个伪元素，该伪元素将放置在第一列中，并推动另一列从第二列开始：

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

#portfolio-nav ul:before {
  content: "";
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

或者您可以使第一个元素从第二列开始，另一个跟随：

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

#portfolio-nav ul > :first-child {
  grid-column:2;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

您还可以如下修改网格定义：

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
}
#portfolio-nav ul {
  display: grid;
  grid-column:2;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

您还可以考虑使用填充来替换空列：

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding:0 calc(100%/6);
  text-align: center;
  list-style: none;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

Answer 2

您可以使用li将第一行grid-column: 2放在第二列中-参见下面的演示

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

ul li:first-child {
  grid-column: 2; /* added */
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

如何将内容添加到特定的网格列？

2 个答案: