Flexbox CSS Card Layout Behavior

Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax

<div class="ui container">
  <div class="ui four cards stackable">
   <div class="teal card">Card1</div>
   <div class="teal card">Card2</div>
   <div class="teal card">Card3</div>
   <div class="teal card">Card4</div>
   <div class="teal card">Card5</div>
   <div class="teal card">Card6</div>
 </div>
</div>

The "ui four cards stackable" class allows for easy organization of cards. However, with dynamic user input, creating rows for every set of 4 cards can be challenging.

Wondering how best to accomplish this using plain CSS? Consider exploring CSS Grid for a solution that may streamline your layout process.

We appreciate any insights or suggestions you may have - thank you!

htmlcsssemantic-uicss-grid

Answer №1

Check out this CSS Grid version for a simple layout:

new codepen

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20%);
  justify-content: space-between;
  grid-gap: 20px;
  padding: 20px;
  width: 90%;
  margin: 0 auto;
  background-color: gray;
}

.item {
  background-color: whitesmoke;
}

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}
<div class="wrapper">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
</div>

To learn more about these CSS properties, refer to this post:

  • CSS-only masonry layout but with elements ordered horizontally

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 plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

htmlarraysangulartypescriptsorting

Modify the NAME attribute when clicked using Jquery

I am attempting to modify the NAME attribute of a DIV with the text from a textbox using jQuery. Take a look at my code snippet: http://jsfiddle.net/e6kCH/ Can anyone help me troubleshoot this issue? ...

javascriptjqueryhtml

Still having trouble getting @font-face to work with Firefox and htaccess

I've been struggling to load my custom font in Firefox despite numerous attempts. Here is the @font-face property code I have placed in the head section: @font-face { font-family: 'MeanTimeMedium'; src: url('http://sweetbacklove.com ...

css.htaccessfont-face

Issue with HTML While Utilizing wp_get_attachment_image

This script : $source = wp_get_attachment_image( get_the_ID(), 'medium' ); $weburl = wp_get_attachment_image_url( get_the_ID(), 'full' ); echo( '<p><a href="%s"><img src="%s"></a></p>', $weburl, ...

phphtmlwordpress

CSS guidelines specifically for when two classes are required to exist simultaneously

Is there a specific effect that can only be achieved when two classes are present simultaneously? For example: .positive{ color:#46a546; } .positive:after{ content: "\25b2"; } .negative{ color:#F00; } .arrow:after{ content: "\25bc"; ...

htmlcss

Exploring the world of jQuery sliders and dynamically updating div container content

Alright, here's what I have come up with so far: First, take a look at this website to see the idea I am trying to explain: What I am aiming for is this concept: A visitor goes to the provided website and wants to know what type of sandwich they can ...

javascriptjqueryhtml

Tips on updating the default checkbox dynamically based on the current checkbox using JavaScript

Seeking to enhance the design of a Perl-generated form with custom CSS effects, rather than relying on the default Perl form. Despite successful functionality, encountering an issue where radio button focus reverts to default selection (Date) after submitt ...

javascriptjqueryhtml

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

Show image at 100 pixels wide after removing float classes (float-sm-start / float-sm-end) in Bootstrap 5 at a breakpoint

I am in the process of updating my HTML files to Bootstrap version 5.2.3. In the current version (4.6.2), I have been utilizing the float classes left and right to position images with text wrapped around them on their respective sides. Additionally, I ha ...

csscss-floatbootstrap-5figure

Combine various canvases into a single one (for exporting purposes) with pure Javascript

I'm currently faced with a unique challenge involving the creation of around 200 canvases, each showcasing an image captured from the user's webcam as part of an experimentation process for the "photo finish" technique. My task now is to export ...

javascripthtmlcanvaswebcam

Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided? Check out my code on Fiddle! jQuery(function () { jQuery('#btn_test').click(function () { $(this).parent().children('#test_inner').slideToggle('500' ...

jqueryhtmlcss

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

I’m encountering an issue with my code. I must emphasize that I’m brand new to this, so please bear with me if the solution is simple. I did attempt to solve it myself before reaching out for help and searched through various posts with similar errors, ...

javascripthtmlajaxjson

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

cssfocusjquery

It appears that the anchors and fragment identifiers are not functioning as expected

On my page somepage.html, I have the following markup: <div class='someclass' id='hashtag1'> <h1>somecontent</h1> </div> <div class='someclass' id='hashtag2'> <h1>somecontent& ...

htmlanchor

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

I am currently working on developing a web-based editor that allows users to customize basic settings for their audio files. To achieve this, I have integrated wavesurfer.js as a plugin due to its efficient and cross-browser waveform solution. After prior ...

javascriptruby-on-railshtmlaudioweb-audio-api

Create an HTML component that expands to fill any leftover space on the page, without using flex

In my current situation, I have two elements positioned side by side with dynamic widths based on their content. The element on the right needs to fill up as much vertical space as possible without a set width. I am looking for an alternative to flexbox d ...

htmlcss

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

The canvas is being expanded by utilizing the drawImage method

Ensuring the correct size of a <canvas> element is crucial to prevent stretching, which can be achieved by setting the width and height attributes. Without any CSS applied other than background-color, I am faced with an unusual issue. Using ctx.draw ...

javascriptangularjshtmlcanvas