语义用户界面反应中的网格对齐问题

Question

I am using semantic-ui-react to create a simple news-like layout with an image and text alongside but unable to fix the empty space issue.

Below is a screenshot along with details in computed panel. I am unable to figure out the cause of the empty white space(outside the padding area marked with green) in the first cell containing the image.

This is how my JSX code looks like -

import * as React from "react";
import { Grid, Image, Container, Header } from "semantic-ui-react";

export const SummaryList: React.SFC = () => {
  const items = Array.from(Array(10).keys());
  return (
    <div>
    {items.map((i) => 
    <Grid key={i} celled stackable>
      <Grid.Row centered columns={2}>
        <Grid.Column width={3}>
          <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/FIFA_series_logo.svg/1280px-FIFA_series_logo.svg.png" />
        </Grid.Column>
        <Grid.Column width={10}>
          <Container >
            <Header as="h3">quick brown fox scored a goal</Header>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor...
            </p>
          </Container>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  )}
  </div>);
};

Answer 1

I recreated your code and I don't have any white space.

So this could be caused by your body styles, try setting the margin and padding to 0, or if you have a container component holding it, the styles on that container could be the issue as well.

Answer 2

The cause of the extra space below was due to the long text in the second column while the cause of the extra space on left was due to the way semantic-ui arranges columns.

I did following things to fix the space on the left -

• moved the Grid out of the loop
• once I understood that semantic-ui comes with 16 columns, I assigned 12 column space to the text container and 4 column space to image.
• removed unnecessary Container within Grid.Column

Following helped me get rid of the extra space on the left -

import * as React from "react";
import { Grid, Image, Container, Header } from "semantic-ui-react";

export const SummaryList: React.SFC = () => {
  const items = Array.from(Array(10).keys());
  return (
    <div>
    <Grid key={i} celled stackable>
    {items.map((i) => 
      <Grid.Row centered columns={2}>
        <Grid.Column width={4}>
          <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/FIFA_series_logo.svg/1280px-FIFA_series_logo.svg.png" />
        </Grid.Column>
        <Grid.Column width={12}>
            <Header as="h3">quick brown fox scored a goal</Header>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor...
            </p>
        </Grid.Column>
      </Grid.Row>
  )}
    </Grid>
  </div>);
};

I am still not sure how to make the text column dynamically adhere to certain size to ensure the image cell doesn't have to stretch too much. For now I adjusted the text size to align to not exceed image cell size.