Pinterest Style Card Layout using React-Semantic-UI

Utilizing semantic-ui-react in React, I am working on displaying cards with varying heights based on the amount of text. I am aiming for a pinterest style layout where each card's height adjusts according to the content it contains.

 ....
<Card.Content>
  <Card.Header className="textheader">
       <b>{this.props.tittle}</b>
  </Card.Header>
  </Card.Content>
  <CardsExtra question="My Question goes here"/>
....

I would like the height of each card to reflect the length of the question within it. Currently, all cards default to the height of the tallest one, which is determined by the question with the most words.

Appreciate any help or suggestions you can provide. Thank you!

cssreactjssemantic-uisemantic-ui-react

Answer №1

If you're looking for a layout similar to Pinterest, consider using Masonry. In my experience, it is the top choice for creating a 'grid layout'. With Masonry, you can easily handle different heights of items.

To implement this layout, I recommend checking out the documentation provided by Masonry and experimenting on your own first. If you encounter any difficulties, feel free to ask a specific question or update your existing one for more assistance.

Answer №2

To implement a workaround suggested by cdog, you can access the solution here. This involves using a CSS hack in Semantic UI with the following CSS code:

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }

  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}

The solution is effective and shows promising results as seen in this link: http://jsfiddle.net/cdog/oj4ew4Le/embedded/result

One limitation of this pure CSS approach is that content must be arranged from top to bottom before going from left to right, rather than left to right first.

If you prefer an alternative order, using Masonry or a similar JS library may be necessary. Refer to the original GitHub post for more information on this option.

Answer №3

No special tools are needed to achieve this layout. Avoid using a card group and opt for creating multiple columns instead. Place the cards in each column based on your desired arrangement. Check out the example snippet below:

<Grid columns={3} stretched>
  <Grid.Column>
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
    <Card style={{ height: '30px' }} />
  </Grid.Column>
</Grid>

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

Issues with CSS Modules not applying styles in next.js 13 version

Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...

javascriptreactjsnext.jsnext.js13

Enhance typescript interfaces with third-party library components in React.js

As a newcomer to typescript, I am in the process of converting my existing react project to use typescript. After changing my files to tsx, I encountered several errors which I managed to resolve except for one type-related issue that I couldn't find ...

reactjstypescriptantd

Changing the location where React Native is installed - a step-by-step guide

Hello, I am a newcomer to the world of React Native. I have recently set up my React Native environment by following the instructions outlined in this guide. To install React Native, I used the command below in the C:// directory: npm install -g create-r ...

androidreactjsreact-native

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

Jest is unable to execute tests containing methods within a .tsx file

Typically, I only test files ending with .ts, but this time I have a file containing utility methods that return a react element. Therefore, my file has a .tsx extension and includes components from material ui and other libraries. Initially, I encountere ...

reactjsjestjsmaterial-uits-jest

Encountering type errors in React+Typescript while dynamically setting values in the change handler

I am currently working on dynamically generating a form based on an array of objects. The objective is to allow users to create accounts dynamically by clicking the Add User button and then submit the complete state object of users to the backend. Encoun ...

reactjstypescriptreact-component

Conditional jQuery actions based on the selected radio button - utilizing if/else statements

This task seemed simple at first, but I quickly realized it's more challenging than expected. Apologies in advance, as Javascript is not my strong suit. My goal is to have the main button (Get Your New Rate) perform different actions based on whether ...

javascriptjqueryhtmlcss

Tips for optimizing image loading speed and enhancing website performance (Using React JS, GSAP, and Netlify)

My website is currently live on Netlify at the following URL: If you're interested, here's the Github link to the project: https://github.com/shindosu/mutsuki-portfolio-client A little background about the app - it's built with React JS. ...

reactjsimagethree.jsgsap

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

I am curious about why device pixel ratio varies between different websites and operating systems. For instance, when using the same device, this site displays a different pixel ratio on Windows compared to Ubuntu. On Windows, the pixel ratio is 1.34 whi ...

csswebsassresponsive-designdevicepixelratio

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

javascriptjqueryhtmlcssjquery-ui

What can I do to keep my navbar on top of the slideshow?

Is there a way to create a responsive navbar that sits in front of a slideshow containing images? I attempted to place the div within the main, but unfortunately it was unsuccessful. ...

javascripthtmlcss

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

I'm currently following a tutorial on how to create responsive layouts with Bootstrap 4 and Angular 6. You can find the tutorial here. I've reached a point where I need to import styles-variables.scss in my styles file, but I keep encountering t ...

cssangulartypescriptbootstrap-4angular7

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

Arranging Divs Inside a Container Div - Dealing with Overflow

I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...

csshtml

Managing interactions with dynamically created buttons

Our Story Greetings! I am skilled in C# and VB.net, but I am diving into the world of Javascript and React. Currently, I am building a ticket purchase app to enhance my skills. While I was able to quickly create this app using Angular, React has posed mor ...

javascriptreactjsecmascript-6dom-events

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...

htmlcsstwitter-bootstrapmicrosoft-edgebootstrap-5

Does the server transmit HTML page content rather than the information you need?

My React application is connected to a backend built with Node.js. However, when I try to fetch data in my React component, the server sends back an HTML page instead of the expected data, displaying raw HTML on the screen. Backend (server.js): app.route ...

javascriptnode.jsreactjs

Creating a fixed navigation bar that stays at the top of the page when scrolling

I am trying to create a navigation bar similar to the one seen on W3School's website. I would like the navigation bar to overlap the header when scrolling down, and for the header to appear above the nav bar when scrolling back to the top. Despite m ...

javascriptjqueryhtmlcss

Step-by-step guide on how to change the appearance of a <DIV> using data from a database (JSON

After retrieving data from a database as a JSON file, I have written code to loop through an item (portOn) and determine if certain ports are present in the array. If a port is found in the array, its corresponding variable is set to true. var portG01,port ...

javascriptreactjs