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

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS t ...

htmlcss

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

htmlcsscharacterasciiitalics

Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

Hey there, I've recently started my journey into web development and have encountered a roadblock. I'm trying to blur the background image of a div on hover without affecting the text inside. I have an id called c1 where I used a javascript func ...

javascriptcssimagetextblur

Tips for dynamically updating an HTML value with Javascript

Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...

phpjavascripthtml

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

javascripthtmlangular

Navigate to the Bootstrap Panel body when the relevant link is clicked

I am facing an issue with a long list of panels that are tedious to scroll through. To make navigation easier, I am attempting to create a shortcut link at the top of the page. Below is the code for the shortcut: <a data-toggle="collapse" data-parent ...

javascriptjqueryhtmltwitter-bootstrap

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

I'm encountering an issue with retrieving the text from LI elements because I have 10 list items and they all have the same class name. When I attempt to fetch the text using the class name or id, I only get the text of the last item. Here is my code ...

javascriptjqueryhtml

Uploading Multiple Files with Base64 Encoding in PHP

I am looking for a way to store images in a database and retrieve them using base64 encoding/decoding. Can anyone guide me on how to achieve this? Here is the HTML code: <form method="POST" action="add_script.php" enctype="multipart/form-data"> ...

phphtmlmysql

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

javascriptjqueryhtmlcssjoomla

The image source is not functioning properly to display the image, even though it is working perfectly on

I'm currently attempting to retrieve an image from Instagram. Everything seems to be in order with the image link on Instagram. However, when I try to use it within an img tag, it fails to fetch. One thing worth noting is that this particular image d ...

htmlcssimagesrc

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

In my HTML code, I have a parent div called "allcomments_4" which contains several child divs with unique IDs (oneEntry), each with their own children. My goal is to locate and retrieve the content inside the last child of the parent node (lastComment) and ...

javascriptjquerycss

Accessing array values depending on DOM response

Generate a string from selected DOM elements I have an object that contains months and their corresponding index numbers (not dates) monthList = {"jan" : "1", "feb" : "2". etc: etc} The user can input values like jan or jan,feb,march and I need to return ...

javascripthtmlloops

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

htmlcssfontswebfontshandwriting

What is the best way to showcase additional fields from a custom post type along with the featured thumbnail feature?

'I designed a custom post plugin in Wordpress that successfully displays the title and main content, but I am facing issues with displaying other fields such as company details. Despite mentioning a featured thumbnail option in my plugin, I am not ab ...

phphtmlwordpresscss

Substitute the images with links provided in an external text file

I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...

jqueryhtmljson

Discover the contents within #document utilizing PUPPETEER

Can someone assist me as I am new here? I am trying to retrieve elements from a virtual reference #document in HTML using Puppeteer, but every time I attempt it, I receive an error stating that the element does not exist. Here are some examples: HTML &l ...

htmlnode.jspuppeteer

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries