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

CSS animations are only functional when the Developer Tools are activated

I recently implemented a transition to uppercase in CSS, but it seems to only work when I open dev tools in Mozilla and not at all in Chrome. This is my first attempt at using animations in CSS, so any feedback on my code is appreciated. I'm curious ...

csscss-transitions

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

css

Troubleshooting Axios post request in React with Node.js and MongoDB still unresolved

I've been encountering an Axios error 404 whenever I try to post data to the mongoose database. Can someone take a look at my code and see if there's anything wrong? Below is my modal that contains the front end of the website: AddForm.jsx impo ...

node.jsreactjsmongodbexpress

What impact does the text-shadow property have on altering the color of hsla text?

I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows). However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% o ...

htmlcsscolorshsl

Create boilerplate code easily in VS Code by using its feature that generates code automatically when creating a

Is there a way to set up VS Code so that it automatically creates Typescript/React boilerplate code when I create a new component? import * as React from "react"; export interface props {} export const MyComponent: React.FC<props> = (): J ...

reactjstypescriptvisual-studio-codeboilerplate

What are the steps to ensure a React component stays updated with data from the back-end?

I have a project underway where several users can work together on an application concurrently. When one user makes changes to the database, how can I automatically update the component for all other users? Would it be efficient to create a function that ...

reactjsfrontend

Encountering difficulty in implementing two modals simultaneously on a single web page while utilizing the useDisclosure() hook in Ch

ChakraUI provides a custom hook called useDisclosure() which gives you access to isOpen, onClose , onOpen. const { isOpen, onOpen, onClose } = useDisclosure() You can use the onOpen function as an onClick handler for a button to open a modal. <Modal ...

javascriptreactjsnext.jschakra-ui

How can one deactivate a <MenuItem> component in material-ui?

Currently, I am in the process of developing a personalized combo box using React and Material-UI. This unique combo box will exhibit the chosen value within the input, present a drop-down menu with various options (MenuItems), and feature a text box at th ...

javascriptreactjsmaterial-ui

Implementing a Create-React-App with Rails API integration on Heroku platform

I'm encountering an issue with deploying my react/rails app on Heroku. Although I've successfully deployed it and the rails server is running, the react app itself is not displaying. It seems like I'm very close to resolving the issue but I ...

ruby-on-railsnode.jsreactjsherokucreate-react-app

Navigating through Expression Engine and utilizing conditional statements

Would greatly appreciate some assistance with this issue. I am working on an Expression Engine website and encountering difficulties with simple conditionals for navigation active states. Despite having a color state designated within the styles, there s ...

cssnavigationexpressionengineconditional-statements

The React Material UI is unable to assess the effect.next

While working on my latest component in React with the material-ui library for front-end UI, I encountered a frustrating issue. The error message that keeps popping up is: TypeError: undefined is not an object (evaluating 'effect.next'). This e ...

reactjsmaterial-ui

Display a loading spinner at the bottom of a React-Native ListView

Trying to find a method to attach an activity indicator at the bottom of a ListView when the user has scrolled to the end and the app is fetching additional data from a server. I attempted adding the indicator after the ListView element, but it appears c ...

reactjsreact-native

Updating the style using a function call in a React module.css file

Hey there, I've been pondering on how to change the color of a slider when calling a function in React. As someone who is new to React, I'm struggling to find information on module.css. Your understanding would be greatly appreciated. import Rea ...

reactjs

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Despite scouring numerous StackOverflow questions, I haven't been able to find a solution that fits my specific issue. It seems like there might be a CSS attribute preventing the div from centering properly. Could utilizing flexbox help resolve this? ...

cssreactjsflexboxnext.js

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

Attempting to integrate information stored in Firebase into a FlatList component

Hello, I am completely new to using React and Firebase. Even though I have followed a few tutorials, I feel quite lost at the moment. My current struggle involves adding data from my Firebase database into my flatlist. The error message I receive is [Unhan ...

reactjsfirebasereact-nativegoogle-cloud-firestoreflatlist

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

Unable to locate dependencies while testing the react package locally

Recently, I came across this npm package designed for React using Typescript. To debug it locally, I initiated npm link in a new React project but encountered an error: I suspect it may not be reading the packages correctly, but I'm unsure how to re ...

reactjsnode.jstypescriptnpm

Designing tables and image galleries using HTML, CSS, and jQuery: A guide

How can I easily transform tabular data into thumbnails with the click of a button? I need a 2-view system that switches between table and thumbnail views without including image thumbnails. I welcome any creative suggestions! :) Examples: ...

jqueryhtmlcss

Achieving functioning routes on a shared hosting environment can be accomplished by following these steps

Hello, I am relatively new to backend development. I am facing difficulties in getting routes from a React app to function properly on my shared hosting space when refreshing /some-page. While I was able to make it work locally with express, I am unsure o ...

node.jsreactjsexpress