Expanding CSS Grid to Occupy Remaining Area

I'm currently utilizing CSS grid to construct a basic 3 column layout. Here's a snippet of my code...

.container {
                display:grid;
                grid-template-columns:1fr 1fr 1fr;
            }

            .col1 {
                background:red;
                text-align:center;
            }

            .col2 {
                background:yellow;
                text-align:center;
            }

            .col3 {
                text-align:center;
                background:green;
            }
<div class="container">

            <div class="col1">
                Column 1
            </div>

            <div class="col2">
                <img src="https://via.placeholder.com/150">
            </div>

            <div class="col3">
                Column 3
            </div>

            </div>

I am attempting to modify the setup so that the middle div is only as wide as the image it contains, while col1 and col2 expand to fill up the remaining space.

Is there someone who can provide me with a sample example?

htmlcsscss-grid

Answer №1

Modify the grid-template-columns property to 1fr auto 1fr as shown in the demo below:

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* making the change here */
}

.col1 {
  background: red;
  text-align: center;
}

.col2 {
  background: yellow;
  text-align: center;
}

.col3 {
  text-align: center;
  background: green;
}

img {
  display: block; /* removes inline element "space" after image */
}
<div class="container">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="col3">
    Column 3
  </div>
</div>

Answer №2

grid-template-columns:1fr auto 1fr;

To achieve center alignment, replace 1fr with auto in the CSS grid template columns.

Answer №3

Check out the code snippet below:

.container {
  display:grid;
  grid-template-columns:1fr auto 1fr;
}

.col1 {
background:red;
text-align:center;
}

.col2 {
background:yellow;
text-align:center;
}

.col3 {
text-align:center;
background:green;
}
<div class="container">

  <div class="col1">
    Column 1
  </div>

  <div class="col2">
    <img width="300px" height="300px" src="https://via.placeholder.com/150">
  </div>

  <div class="col3">
    Column 3
  </div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

javascriptjqueryhtmljquery-bootgrid

How was the background design accomplished on this particular website using CSS?

I've noticed that the background on this website scrolls and changes at various points. It transitions from blue to green with clouds moving. I'm curious about what term is used to describe this type of background effect (I don't think it&ap ...

css

Tailwind configuration is failing to export complete CSS styles

I have been attempting to integrate the entire Tailwind 3.0 CSS library into a new Laravel 8.* project in order to utilize the corePlugins feature to eliminate unwanted styles. Despite setting everything up quickly, I am only seeing the basic styles publis ...

htmlcssnpmtailwind-cssnpx

I'm currently facing an AttributeError issue, and I'm seeking solutions to resolve it

Currently, I am in the process of developing an eCommerce platform using Django. However, I have encountered an issue when attempting to manipulate the quantity of each product in the cart. The error message displayed is as follows: AttributeError at /orde ...

htmldjango

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

javascriptjqueryhtmlcss

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

javascriptphphtmlwordpress

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

htmlxpathseleniumfirebug

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Is there a way in Angular 12 with Bootstrap 5 using ngPrime to overlap a p-dialog over any other element without using z-index and CSS, solely relying on PrimeNG? I have tried using z-index with: .my-class{ z-index: 2147483647 !important; } However, ...

cssangularmodal-dialogprimengz-index

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

javascripthtmlcss

Avoid displaying the HTML formatting whitespace on the webpage

I'm working with cakephp's helper to generate spans using the code below: <div id="numberRow"> <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', & ...

phphtmlcakephp

Locating the value of a data attribute from a distant parent div using jQuery

How can I access the closest div from an anchor tag that has a data-id attribute without using multiple parent() methods? Even though .parent().parent().parent() works, I am trying to find a better solution. <div class="panel panel-default" data-id="@ ...

javascriptjqueryhtmljquery-selectors

Press the Enter key to generate a new table row

I have been dynamically creating an HTML table. Each row contains two columns created through a recursive call. Currently, a new row is generated by clicking on the second cell, but I want to switch this action to the "Enter" key press. Although my code su ...

javascriptjqueryhtmldom

Utilizing React for incorporating HTML5 canvas gradients

I'm currently working on an app that allows users to generate a background gradient with two distinct colors using React. The issue I'm facing is that while the first color appears correctly, the second color ends up looking more like a solid col ...

javascriptreactjshtmlcanvashtml5-canvas

Modify the `value` of the `<input type=color>` element

Hello there! I have been working on a feature where I need users to select a color and have that choice reflected in the value field. Initially, I assumed this could be achieved easily through Bootstrap's features since my project is based on Bootstr ...

javascripthtmljquerybootstrap-5

Multiple keyup events being triggered repeatedly

Currently, I am developing an Angular 4 application. Within my component's HTML, there is a textbox where users can input text. As soon as the user starts typing, I want to trigger an API call to retrieve some data. The current issue I am facing is t ...

htmlangulartypescriptrxjs

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Learn the process of using Python to copy HTML code to the clipboard

I am attempting to create a simple script in Python on Windows 10 that can copy a customized text hyperlink (Example) to the clipboard and maintain its recognition as HTML when pasted, much like how Microsoft Word handles custom text hyperlinks. I have at ...

htmlpython-3.xclipboard

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists. This is the code I have attempted: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>index</title> <style> ...

javascriptjqueryhtmlcss

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

javascripthtmljquerydjangoajax

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js