CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
Omar
Omar

Reputation: 3411

split parent columns width with inlined child columns semanti ui react

I want to keep a section of 12/16 width for certain components and one section the remaining 4/16 width for another component.

In my 12/16 column I want to have three other columns that split the width evenly between 12.

When I do this each column ends up on a new line instead of appearing next to each other taking up 12 columns, 4 per.

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import "./styles.css";
import { Grid } from "semantic-ui-react";
function App() {
  return (
    <Grid>
      <Grid.Column width={12}>
        I will always take up 12 columns I will always take up 12 columns I will
        always take up 12 columns I will always take up 12 columns I will always
        take up 12 columns I will always take up 12 columns
        <Grid.Column width={4}>column 1 why arent these</Grid.Column>
        <Grid.Column width={4}>column 2 columns inline</Grid.Column>
        <Grid.Column width={4}>
          column 3 and each taking up 1/3 of the 12?
        </Grid.Column>
      </Grid.Column>
      <Grid.Column width={4}>
        My four column componenet takes up four columns
      </Grid.Column>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit inlining columns and splitting the parent column

Upvotes: 1

Views: 272

Answers (1)

Who Knows
Who Knows

Reputation: 101

All you have to do is to embed your 3 Column into another Grid component. Like this: 

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import "./styles.css";
import { Grid } from "semantic-ui-react";
function App() {
  return (
    <Grid>
      <Grid.Column width={12}>
        I will always take up 12 columns I will always take up 12 columns I will
        always take up 12 columns I will always take up 12 columns I will always
        take up 12 columns I will always take up 12 columns
        <Grid>
            <Grid.Column width={4}>column 1 why arent these</Grid.Column>
            <Grid.Column width={4}>column 2 columns inline</Grid.Column>
            <Grid.Column width={4}>
                 column 3 and each taking up 1/3 of the 12?
             </Grid.Column>
        <Grid>
      </Grid.Column>
      <Grid.Column width={4}>
        My four column componenet takes up four columns
      </Grid.Column>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In your case, as those 3 Grid.Columns have no direct Grid parents, it has no context do divide proportionnally to a Grid Component, that's why it's matching their parent's width, without any consideration for the width prop.

Upvotes: 1

Related Questions