Блог

Я создаю пользовательский интерфейс с использованием библиотеки Semantic UI React и хочу установить ширину столбца между 3 и 4. Я использую 3.5 и 0.5, но поскольку перечисления библиотеки не поддерживают его, дизайн не отображается должным образом. Все ширины столбцов в сумме равны 16.

Вот как отображается пользовательский интерфейс

Вот как я хочу, чтобы это было. Мобильная ширина: 3,5, разделитель: 0,5, текст: 3, разделитель: 1 и так далее

         <Grid.Row>
          <Grid.Column width={1} />
          <Grid.Column width={3.5}>
            <Image src={mobileQuizPrevious} />
          </Grid.Column>
          <Grid.Column width={0.5} />
          <Grid.Column width={3}>
            <p>
              <strong>Before</strong>
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
              augue nulla, condimentum a tortor non, gestas maximus neque.
            </p>
          </Grid.Column>
          <Grid.Column width={1} />
          <Grid.Column width={3.5}>
            <Image src={mobileQuizNew} />
          </Grid.Column>
          <Grid.Column width={0.5} />
          <Grid.Column width={3}>
            <p>
              <strong>After</strong>
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
              augue nulla, condimentum a tortor non, gestas maximus neque.
            </p>
          </Grid.Column>
        </Grid.Row>
 

Параметры ширины сетки Semantic UI

Любая помощь будет оценена!

Я решил это так. Подошел довольно близко к предполагаемому дизайну

 <Grid.Row centered>
          <Grid.Column width={1} />
          <Grid.Column width={3} style={{ marginRight: "1em" }}>
            <Image src={image1} />
          </Grid.Column>

          <Grid.Column width={3}>
            <p>
              <strong>Before</strong>
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
              augue nulla, condimentum a tortor non, gestas maximus neque.
            </p>
          </Grid.Column>
          <Grid.Column width={1} />
          <Grid.Column width={3} style={{ marginRight: "1em" }}>
            <Image src={image2} />
          </Grid.Column>

          <Grid.Column width={3}>
            <p>
              <strong>After</strong>
              <br />
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
              augue nulla, condimentum a tortor non, gestas maximus neque.
            </p>
          </Grid.Column>
        </Grid.Row>