CSS grid make 3 column layout with children-CodePudding

I have following markup:

<div >
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

I am trying to make it a 3 column layout where, first column is Prev second column is 1 2 ... 12 and last is Next and the middle column should be center aligned, now I am not able to update the markup as its autogenerated by the application. I tried with following:

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

But the second column is not spreading entirely

CodePudding user response：

Use flexbox:

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

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

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

<div >
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

CodePudding user response：

If you want to work same result in flexbox, here is code:

.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 >
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

CodePudding user response：

Here is what I did

HTML:

<div >
    <a>Prev</a>
    <div >
        <a>1</a>
        <a>2</a>
        <span>...</span>
        <a>12</a>
    </div>
    <a>Next</a>
</div>

CSS:

.pagination{
    display: grid;
}

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

Add the line .pagination::after{content: '\a';} to add a line break, and add a div for your second line to not add line break between <a>1</a> and <a>2</a>, for example.

CodePudding user response：

You can try:

<!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 >
        <a>Prev</a>
        <span>
            <a>1</a>
            <a>2</a>
            <span>...</span>
            <a>12</a>
        </span>
        <a>Next</a>
    </div>    

</body>
</html>

CodePudding user response：

One option – and please note that I dislike this approach intensely – is the following:

/* 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 >
  <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.

Obviously, as others have clearly shown, CSS flex layout is the preferable approach, for example:

/* 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 >
  <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

CodePudding user response：

Can you try this way with flex?

HTML:

<div >
 <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/