Responsive Segment Layout with React Semantic UI

Question

I have a challenge adding CSS gutters to Semantic-UI grids. I have one Grid column with a segment that's being rendered repeatedly.

Here's my code:

import React from 'react';
import ReactDOM from 'react-dom';
import { Segment, Grid, Image as ImageComponent, Item, Button } from 'semantic-ui-react'

export default class TeachersListSegment extends React.Component {
  render() {
    return (
        <div>
          <Grid.Column mobile={16} tablet={8} computer={8} largeScreen={8} widescreen={8}>
            <Segment stacked padded color='blue'>
              <Grid>
                <Grid.Row>
                  <Grid.Column width={11}>
                    <Item.Group link>
                      <Item>
                        <Item.Image size='tiny' src='https://semantic-ui.com/images/avatar/large/steve.jpg' />

                          <Item.Content>
                            <Item.Header><a>{this.props.header}</a></Item.Header>
                              <Item.Description>{this.props.description}</Item.Description>
                                 <Item.Description>Another Description</Item.Description>
                                  </Item.Content>
                                </Item>
                              </Item.Group>
                      </Grid.Column>
                      <Grid.Column width={5}>
                        <Button positive className="mb-3 teachers-list-button">Book Lesson</Button>
                        <Button basic color="green" className="teachers-list-button">Send Message</Button> 
                      </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
            </Grid.Column>
        </div>
    );
  }
}

And here's the code that renders the segment

<div className="page-content">
   <Grid stackable centered columns={2}>
      <Grid.Row>
         <TeachersListSegment header="Stevie Feliciano" description="Some Description" />
         <TeachersListSegment header="Stevie Feliciano" description="Some Description" />
         <TeachersListSegment header="Stevie Feliciano" description="Some Description" />
         <TeachersListSegment header="Stevie Feliciano" description="Some Description" />
         <TeachersListSegment header="Stevie Feliciano" description="Some Description" />
    </Grid.Row>
  </Grid>
</div>

The display currently looks like this. What's an efficient way to add column gaps and row gaps to the display? I applied the gutter styles as in the link above but did not work. This question also helped me apply the right code to make it mobile responsive.

Any suggestions for a solution to apply the column and row gaps?

Answer 1

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