"Divs of the same type automatically adjust size to fit within the

I am currently exploring the possibility of creating a versatile component that can be customized based on the needs of its parent element, whether through bootstrap or traditional flexbox / CSS grid. I want to determine the level of reusability this component would offer.

Specifically, I have designed a component that includes an image and text, and I am looking to reuse it while leveraging the functionalities provided by bootstrap utilities.

Example Code: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
            
<div class="row no-gutters text-white dy-fixed-height-content mt-4">
  <div class="col-lg-6">
    <div class="bg-dark p2 flex-fill">
      <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
      <div class="card__title">
        <a target="_blank" href="" class="card__title--link">Big item here</a>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="d-inline-flex flex-wrap flex-fill align-content-stretch">
      <div class="bg-dark p2 flex-fill">
        <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
        <div class="card__title">
          <a target="_blank" href="" class="card__title--link">Small item here</a>
        </div>
      </div>
      
      <!-- Additional card components go here -->
      
    </div>
  </div>
</div>

My Goal:

https://i.stack.imgur.com/aN26U.png

htmlcssbootstrap-4

Answer №1

Creating a clean layout using basic CSS and the flex property is quite straightforward. By following your existing structure with minimal additional containers and unique class names: 

.row {
  display: flex;
  align-items: stretch;
  justify-content: center
}

.column {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px dotted black;
}

.card a {
  padding: 10px;
  display: block;
}

.card img {
  max-width: 100%;
}

.column.multiple .card {
  box-sizing: border-box;
  flex-basis: 50%;
}
<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Large item here</a>
    </div>
  </div>
  <div class="column multiple">
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
  </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

jQuery - Enhancing User Experience with Dynamic Screen Updates

Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...

javascriptjqueryhtmlcss

Struggling with textpath SVG elements in jQuery

Currently, I am implementing SVG in my project and aiming to apply the toggleClass function using jQuery on the textpath elements upon clicking. My initial plan was: $("text#names > textpath").click(function() { $(this).toggleClass("newClass"); }) ...

javascriptjqueryhtmlsvgtoggleclass

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary. Is there a way to combine the browse and upload functions into just one button? ...

phpjavascripthtmlfileupload

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

I am working on a web application similar to mini-tweets. The content for the posts is retrieved from a database and I want to include an 'up vote' button for each post, similar to the image shown below. Each post has properties such as id, auth ...

pythonhtmlflaskformshttp-post

Adjusting value of one input field according to the content of another text field in an

Just starting out with Angular and I am looking to dynamically change the value of a hidden input field called 'cc_card' based on the first digit entered in another input field called 'cc_number'. For example, if the user enters 5 in &a ...

javascriptjqueryhtmlangularjs

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...

javascripthtmldateif-statementquickbase

Using the information retrieved from Google Place Autocomplete and saving it for future reference

I am interested in utilizing the Google API "Place Autocomplete" widget to enhance user experience on my website. The specific widget I have in mind can be found here. My goal is to streamline the process of obtaining property addresses from Real Estate A ...

javascripthtmlcssgoogle-maps-api-3autocomplete

Warning: Datatables encountered an issue with the table ID 'example'

Good day, I am seeking clarification regarding DataTables. In a tutorial, I came across a table that can be edited "inline". I prefer the table to be in German. The code snippet for the table: <script type="text/javascript" language="javascript" ...

javascripthtmljquerydatatables

Can a callout or indicator be created when a table breaks across columns or pages?

As we develop HTML pages for printing purposes, one specific requirement for tables is to include an indicator like "Continues..." below the table whenever a page or column break occurs. Additionally, in the header of the continuation of the table, we need ...

javascripthtmlcsscss-selectors

Tips for retrieving and displaying values from a form using only PHP

I have a simple request: I want to input a name, click the submit button, and then display the name below the form. Seems easy right? <?php echo $_POST['one']; ?> <!DocType HTML> <html> <body> <p> ...

phphtmlforms

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

Arranging elements within the flex container in perfect alignment

I'm stuck trying to figure out how to adjust the layout of a flex container with three child elements. Here is the code I'm working with: html,body,div {margin:0;padding:0;} .cont { display: flex; justify-content: space-between; height: ...

cssflexbox

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

csscaching

Content that can be scrolled within a React.Box container

I am struggling with a particular view. The columnBox I have can potentially hold a large number of items, but for some reason it's not scrolling in the view. I've already tried setting overflowY to auto, but since I don't know the exact hei ...

htmlreactjsmaterial-ui

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

javascriptcssvue.jsvuejs2vuetify.js

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Custom stylesheet for individual users?

On my website, users can pick a template for their webpage. After selecting a template, I would like them to have the ability to customize certain styles like the font color. Is there a way to achieve this? I was thinking about saving the user's cus ...

htmlcssasp-classic

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...

javascripthtmlangularangular2-directives