"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

Determine if the content within the YouTube iFrame has been updated

I currently have an iframe on my webpage that does not initially display a video. However, when the user clicks a button, a Youtube video will be loaded into the iframe. I am trying to detect when the video has finished loading by using the on() method t ...

jqueryhtmliframeyoutube

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

htmlangularbuttonaudio

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

Adjusting the repeating-linear-gradient CSS background

My goal is to make adjustments to a specific CSS code, in this case it is the repeating-linear-gradient. Take a look at my current implementation: input[type="range"]::-moz-range-track { background: repeating-linear-gradient(to right, #ccc, # ...

csslinear-gradients

Drop Down Automation with Selenium IDE

Currently in the process of automating a User Acceptance Testing (UAT) for a software project at my company. I've completed all the typical tasks like recording actions and clicking on buttons, but ran into an issue with a drop-down menu. The problem ...

javascriptjqueryhtmlseleniumselenium-ide

Loading asp.net controls dynamically using JavaScript

In the process of creating ASP.NET controls that facilitate the development of dynamically generated websites based on a class.cs file, these controls are loaded into a Placeholder within an update panel. My goal is to leverage technologies like AJAX and ...

asp.netajaxjsonhtmlc#-4.0

Having Trouble with JQuery Triggering Tabs inside an iFrame

I am curious why this code functions properly on my parent's HTML page: $("#assessmentsTab").trigger("click"); but fails to work within my iFrame: $("#assessmentsTab", window.parent.document).trigger("click"); Does anyone have any suggestions? I ...

jqueryhtmltabs

the intricacies of resizing a dijit dialog

My dialog is defined as shown below: <div data-dojo-type="dijit/Dialog" id="DetailDialog" class="dijitDialog" ... I have loaded a grid inside the dialog with 10 columns. var dialog = dijit.byId("DetailDialog"); dialog.set("content", this.Details); d ...

javascripthtmldojo

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

javascriptjqueryhtmlformsfile-upload

Creating a notification feature for an HTML application

I am in the process of creating an HTML app through intel XDK. While I understand that using HTML to build apps is not as common, it is the language I am most familiar with, along with CSS. One feature I would like to include in my app is a weekly notific ...

htmlioscssipadintel

Background image not showing on div element

As someone who is new to coding, I could really use some assistance with a problem I've encountered. Specifically, I'm attempting to reference an image within a div element, but unfortunately it's not displaying when I check through my brows ...

htmlcss

What could be causing the loading issues with my three.js examples?

After downloading Mr. Doob's three.js project, I noticed that the examples in the folder work fine if they don't involve a model or texture. However, the ones with models or textures appear blank for some reason. This issue perplexes me as I am a ...

htmlgoogle-chromeloadingwebglthree.js

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

Does anyone else experience their HTML and CSS elements shifting around based on the screen size or zoom level? I have screenshots illustrating this issue. Here is how it currently appears And here is how it's supposed to look ...

javascripthtmlcssiframebrowser

Ensuring the container height remains consistent with fluctuating content dimensions

Imagine a container with content, where the container's width is fixed but its height adjusts based on its inner content. Initially, when the content causes the container to be a specific height, the challenge arises in shrinking the inner elements w ...

htmlcss

The flex-wrap property with a value of "nowrap" does not seem to

I am struggling with making the page responsive. The flex-wrap: nowrap property seems to be causing issues. Can someone please assist me in identifying the root of the problem? .logo { text-decoration: none; color: white; } .header { width: ...

htmlcssflexbox

Harnessing the power of the Zurb Foundation 4 grid system to create visually appealing list elements

When it comes to styling the layout of a page, Foundation 4's grid system with its mobile-first approach is a no-brainer, especially if you're already using other foundation elements like textual content, images, and sidebars. On the example pag ...

csszurb-foundation

Adding div elements using checkbox switch

In this code snippet, my aim is to display costs based on checkbox selection and generate corresponding totals in the bottom row when the checkboxes are toggled. The goal is to allow users to choose relevant items and have the total cost calculated accordi ...

javascripthtml

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be: Street Number, PostalCode City If the address is too long to fit on one line, it should be displayed as: Street ...

csscss-float

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

jqueryhtmlcssjpeg