Fancy Nancy Comments - Answer Overflow

Fancy Nancy

•Created by Nibelung Valesti on 11/7/2024 in #front-end

Two Column Layout, but the other one goes to edge.

Oh, neat! That is indeed a much more elegant solution. Updating my previous answer:

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

7 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 11/7/2024 in #front-end

Two Column Layout, but the other one goes to edge.

Use relative positioning + negative margin on the image container. Example:

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

7 replies

KPCKevin Powell - Community

•Created by Zempai on 11/7/2024 in #front-end

CSS – managing grid-template-columns sizes with classes

I'm not sure I fully understand your question. You want to add an on-demand padding in a grid layout without disturbing the content’s alignment, using CSS techniques that don’t rely on ::before or ::after pseudo-elements, nor require extensive redefinition of padding-inline? Maybe add extra empty columns on each side for padding? Something like this:

<div class="grid-container">
    <div class="grid-item with-padding">Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item no-padding">Non-Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item with-padding">Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item no-padding">Non-Padded Content</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1rem) 2fr minmax(0, 1rem) 1fr;
}

.grid-item.with-padding {
    grid-column: 2 / span 3;
}

.grid-item.no-padding {
    grid-column: 3;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1rem) 2fr minmax(0, 1rem) 1fr;
}

.grid-item.with-padding {
    grid-column: 2 / span 3;
}

.grid-item.no-padding {
    grid-column: 3;
}

Created 5 columns in the container. 1fr on both sides for flexible spacing, wrapping minmax(0, 1rem) on both sides in case you apply the padding class. If that is indeed what you meant, are you sure you're asking the correct questions? What is your use case? What design are you attempting to achieve? If that is not what you meant, I apologize, and ask that you further clarify or elaborate on the question.

5 replies

Gaming

Programming