CODEWITHSUNDEEP
javascriptreactjswebweb-applications
UnchartedWaters
UnchartedWaters

Reputation: 542

Why am I getting incorrect layout when using the "Grid" component of 'semantic-ui-react'?

I have the following hierarchy in my project

project
- node_modules
- public
- src
  - components
    - CustomGrid.js
  - App.js

as well as the other standard files in any React project: package.json, README, package-lock.json, .gitignore.

CustomGrid.js contains the following code

import React from 'react';
import { Grid } from 'semantic-ui-react';

class CustomGrid extends React.Component {
  render() {
    return (
      <Grid columns={2}>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
      </Grid>
    );
  }
}

export default CustomGrid;

App.js contains the following code

import React, { Component } from 'react';
import CustomGrid from './components/CustomGrid';

class App extends Component {
  render() {
    return (
      <CustomGrid />
    );
  }
}

export default App;

The output I get is as follows

enter image description here

However, based on my code and the specification here, the two 'Hello World' statements should be side-by-side. What am I doing wrong?

Upvotes: 0

Views: 94

Answers (2)

AndreasT
AndreasT

Reputation: 1001

You need to install semantic css module
npm i semantic-ui-css
and then import it to your index.js
import "semantic-ui-css/semantic.min.css";

You can see the result at this codesandbox: SemanticGridTest

NOTE: this way you import the whole Semantic-css-library.
It's ok for development but not for production.

Upvotes: 1

Austin Greco
Austin Greco

Reputation: 33554

It looks like you're missing the semantic ui css? See https://react.semantic-ui.com/usage#css

Upvotes: 1

Related Questions