Responsive Semantic UI React Grid, Columns, Rows

How to create responsive layout with react-semantic-ui?

You would need to declare the column A width in a variable that would change depending on if column B is open or not. A solution for that is here https://codesandbox.io/s/8843zowzj9

As semantic-ui Grid.Row can have a width of 16 units, columns A would start with that width, and it would decrease if you show column B (by the width you desire) or increase once you hide it.

The stackable columns={2} attributes in the Grid tag makes this clever enough to also make them stack once the screen reaches a mobile resolution.

semantic-ui-react grid - display full width of column, after only” columns is hidden

Same code as in the accepted answer:

<Grid>
  <Grid.Column computer={4} only='computer'>
    (Optional content only for computers sized screen)
  </Grid.Column>
  <Grid.Column tablet={16} computer={12}>
    (Main Content)
  </Grid.Column>
</Grid>

See device visibility and responsive width sections of docs.

Grid Columns data overlapping in semantic-ui-react?

Columns are not overlapping. It's your <p> element takes more space than columns.

Add this style to it:

word-break: break-word;

Before word-break:

After word-break:

How to make a Semantic UI React grid full screen with different row heights?

I don't think stretched does what you are trying to do. Read the docs on Stretched to see their example.

You can set the height of the grid to 100vh, the height of the first row to 70%, and the height of the second row to 30%. Here's a jsfiddle example I put together.

render() {
  return (
    <Grid celled padded style={{height: '100vh'}}>
      <Grid.Row style={{height: '70%'}}>
        <Grid.Column width={10}>
          <p>One</p>
        </Grid.Column>
        <Grid.Column width={6}>
          <p>Two</p>
        </Grid.Column>
      </Grid.Row>

      <Grid.Row style={{height: '30%'}}>
        <Grid.Column width={10}>
          <p>Three</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Four</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Five</p>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  );
};

Responsive Segment Layout with React Semantic UI

You may add class column to all the <TeachersListSegment> and wrap it all in <div class="ui two column stackable grid"> </div>.

Semantic UI React: Align 2 columns in middle and 1 to the top

You can put verticalAlign property on each Grid.Column and remove this property from the Grid.Row. Hopefully it should work

import React from "react";
import {Grid,Header} from "semantic-ui-react";

<Grid>
  <Grid.Row>
    <Grid.Column width={4}>
      <Header as="h4">
         Title
      </Header>
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Suspendisse finibus hendrerit nulla, quis mattis felis eleifend 
       sed. Vivamus a blandit tellus. Donec non erat enim. Nullam 
       vulputate lectus a finibus tempor. Fusce vel purus est. Praesent 
       ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
       In maximus enim sem, id dignissim odio volutpat vitae.
      </p>
     </Grid.Column>

     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img1} alt="img1" />
     </Grid.Column>
    
     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img2} alt="img2" />
     </Grid.Column>
  </Grid.Row>
</Grid>

---

Related Topics