Exploring the potential of CSS Grid with dynamic content

Question

Exploring the potential of CSS Grid with dynamic content

I have a paragraph that contains text, possibly a span element, as well as some pseudo-content using the :before and :after selectors:

<p>Regular text with no span</p>
<p>Extra content with a <span>span</span></p>

My goal is to position the pseudo-content at the start and end of each paragraph like so:

«   Regular text with no span               »
«   Extra content with a [span]            »

I attempted to achieve this using grid-template-columns, but I'm struggling due to the presence of the additional span element. Is there a better approach using flexbox instead?

Below is a code snippet for reference:

p {
  display: grid;
  width: 40em;
  grid-template-columns: 2rem ? ? 2rem;
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before {
    content: "«";
  }
  &:after {
    content: "»";
  }
}

<p>Regular text with no span</p>
<p>Extra content with a <span>span</span></p>

css pseudo-element

Answer 1

Answer №1

For this particular case, it's best to stick with a default flow layout rather than using Flexbox or CSS grid.

p {
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before,
  &:after {
    content: "«";
    display: inline-block;
    width: 1.5rem;
  }
  &:after {
    content: "»";
    /* you may not want the below */
    float: right;
    text-align: right;
    /* */
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Answer 2

For this particular case, it's best to stick with a default flow layout rather than using Flexbox or CSS grid.

p {
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before,
  &:after {
    content: "«";
    display: inline-block;
    width: 1.5rem;
  }
  &:after {
    content: "»";
    /* you may not want the below */
    float: right;
    text-align: right;
    /* */
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Answer 3

Answer №2

If it's possible to adjust your HTML structure, it would be beneficial to enclose the entire content within another layer. This will prevent any issues with random <span> elements intersecting since they will be contained within the same grid cell.

article {
  display: grid;
  grid-template-columns: 2rem auto 2rem;
  width: 40em;
  align-items: center;
  
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  
  &:before {
    content: "«";
  }
  
  &:after {
    content: "»";
  }
}

<article><p>Normal content without a span</p></article>
<article><p>Additional content with a <span>span</span></p></article>

If restructuring is not feasible, utilizing flexbox could be a solution, although this might lead to complications if the paragraph wraps onto a new line.

p {
  display: flex;
  width: 40em;
  
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  
  &:before {
    content: "«";
  }
  
  &:after {
    content: "»";
    margin-inline-start: auto;
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Another approach is to combine grid layout with display: contents, treating the inner <span> as plain text. However, this may limit styling options like borders or paddings, and compatibility considerations should be taken into account. Check its support status.

p {
  display: grid;
  width: 40em;
  grid-template-columns: 2rem auto 2rem;
  span {
    display: contents;
    color: red;
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before {
    content: "«";
  }
  &:after {
    content: "»";
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Answer 4

If it's possible to adjust your HTML structure, it would be beneficial to enclose the entire content within another layer. This will prevent any issues with random <span> elements intersecting since they will be contained within the same grid cell.

article {
  display: grid;
  grid-template-columns: 2rem auto 2rem;
  width: 40em;
  align-items: center;
  
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  
  &:before {
    content: "«";
  }
  
  &:after {
    content: "»";
  }
}

<article><p>Normal content without a span</p></article>
<article><p>Additional content with a <span>span</span></p></article>

If restructuring is not feasible, utilizing flexbox could be a solution, although this might lead to complications if the paragraph wraps onto a new line.

p {
  display: flex;
  width: 40em;
  
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  
  &:before {
    content: "«";
  }
  
  &:after {
    content: "»";
    margin-inline-start: auto;
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Another approach is to combine grid layout with display: contents, treating the inner <span> as plain text. However, this may limit styling options like borders or paddings, and compatibility considerations should be taken into account. Check its support status.

p {
  display: grid;
  width: 40em;
  grid-template-columns: 2rem auto 2rem;
  span {
    display: contents;
    color: red;
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before {
    content: "«";
  }
  &:after {
    content: "»";
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

Exploring the potential of CSS Grid with dynamic content

Answer №1

Answer №2

Similar questions

Numerous DIVs with floating elements and border styling

Adaptive stationary slideable navigation bar

Expand and Collapse Button for Customizing Table Height Individually

How do I go about aligning the first row to the center vertically?

Turn off hover effect for MUI DataGrid

Placing <IconButton> at the bottom right of <Paper> using React and Material UI without utilizing FAB

What steps can I take to minimize the excessive white space below the footer on my website?

Adjusting Size Dynamically for Tooltips Based on Content Length

Tips for adjusting the height of the Bootstrap navbar and ensuring the text remains centralized

Guide to incorporating vertical scrolling for a grid of items in Material UI

Stop text from breaking out of the flexbox container

Harnessing the power of Bootstrap 4: Adding text and icons to your <progress> bars

Incorporate a smooth transition effect to a dynamically resizing div button

Changing font color of a selected item in Material-UI's textview

Change the color of unordered list items only at the same level

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Converting an image to a link is not effective

Add CSS styling to a section of a canvas

Unique fluid layout with varied behavior

What is the best way to automatically clear an input field after a specified delay?