CSS 网格使 3 列布局与 children

Question

我有以下标记：

<div class="pagination">
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

我正在尝试将其设为 3 列布局，其中第一列为 Prev，第二列为 1 2 ... 12，最后一列为 Next，中间列应居中对齐，现在我无法更新标记，因为它是由应用程序自动生成的。我尝试了以下内容：

.pagination {
    display: grid;
    grid-template-columns: 100px repeat(auto-fit, 20px) 100px;
}

但是第二列没有完全展开

Answer 1

你可以用 flex 试试这个方法吗？

HTML:

<div class="pagination">
 <div>
   <a>Prev</a>
 </div>
 <div>
   <a>1</a>
   <a>2</a>
   <span>...</span>
   <a>12</a>
 </div>
 <div>
  <a>Next</a>
 </div>
</div>

CSS:

.pagination {
  display: flex;
  justify-content: space-between
}

https://jsfiddle.net/Danielprabhakaran_N/svkc30wg/

Answer 2

如果你想在 flexbox 中得到相同的结果，这里是代码：

.pagination {
    width: 100%;
    padding: 20px;
    background-color: #aaa;
    display: flex;
    align-items: stretch;
}
.pagination a {
    width: 40px;
    text-align: center;
}
.pagination a:first-child,
.pagination a:last-child {
    width: 100%;
}
.pagination a:first-child {
    text-align: left;
}
.pagination a:last-child {
    text-align: right;
}

<div class="pagination">
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

Answer 3

一个选项——请注意，我非常不喜欢这种方法——如下：

/* Simple reset styles to normalise layout and base-sizes: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem/1.5 sans-serif;
  margin: 0;
  padding: 0;
}

/* defining the grid (obviously adjust sizing and layout to your taste: */
.pagination {
  display: grid;
  grid-template-areas: "prev pages next";
}

/* Selecting all <a> elements that are not the :first-child and
   and are also not the :last-child, and also the <span> elements: */
a:not(:first-child):not(:last-child),
span {
  /* displaying the contents of the selected elements as if their
     outer element (the elements selected) didn't exist or were
     'transparent' to CSS layout:*/
  display: contents;
  /* positioning the elements in the 'pages' area of the grid: */
  grid-area: pages;
}

[href="#prev"] {
  grid-area: prev;
}

[href="#next"] {
  grid-area: next;
}

<div class="pagination">
  <a href="#prev">Prev</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <span>...</span>
  <a href="#">12</a>
  <a href="#next">Next</a>
</div>

JS Fiddle demo.

显然，正如其他人已经清楚表明的那样，CSS 弹性布局是更可取的方法，例如：

/* simple CSS reset */
*,
::before,
::after {
  box-sizing: border-box;
  font: normal 400 1rem/1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.pagination {
  display: flex;
  width: 90vw;
  /* setting the margin on the block-axis of the element, perpendicular to
     the 'text-flow' axis:*/
  margin-block: 1em;
  /* setting margin on the inline-axis (the 'text-flow' axis) of the
     element: */
  margin-inline: auto;
  /* shorthand for justify-content: center and align-content: center: */
  place-content: center;
  /* placing a 0.5em gap between adjacent siblings: */
  gap: 0.5em;
}

a:first-child {
  /* setting a margin of 'auto' to the a:first-child element's side
     which is at the end of its 'text-flow', so between the first-element
     and its following sibling: */
  margin-inline-end: auto;
}

a:last-child {
  /* similar to the above, but setting the margin between the a:last-child
     and its preceding sibling: */
  margin-inline-start: auto;
}

<div class="pagination">
  <a href="#prev">Prev</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <span>...</span>
  <a href="#">12</a>
  <a href="#next">Next</a>
</div>

JS Fiddle Demo

Answer 4

这是我做的

HTML:

<div class="pagination">
    <a>Prev</a>
    <div class="second-line">
        <a>1</a>
        <a>2</a>
        <span>...</span>
        <a>12</a>
    </div>
    <a>Next</a>
</div>

CSS:

.pagination{
    display: grid;
}

.pagination::after{
    content: '\a';
}

添加行 .pagination::after{content: '\a';} 以添加换行符，并为第二行添加 div 以不在 <a>1</a> 和 <a>2</a> 之间添加换行符，因为例如。

Answer 5

使用弹性框：

.pagination{
  display: flex;
  gap: 10px;
}

.pagination a:first-child{
  margin-right: auto;
}

.pagination a:last-child{
  margin-left: auto;
}

<div class="pagination">
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

Answer 6

你可以试试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ans dt 30-Mar-2022</title>
    <style>

    .pagination {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        justify-items: center;
    }

    </style>
</head>
<body>
    <div class="pagination">
        <a>Prev</a>
        <span>
            <a>1</a>
            <a>2</a>
            <span>...</span>
            <a>12</a>
        </span>
        <a>Next</a>
    </div>    

</body>
</html>

CSS 网格使 3 列布局与 children

CSS grid make 3 column layout with children

html

css

css-grid