CODEWITHSUNDEEP
csssemantic-ui
Andy
Andy

Reputation: 41

semantic ui container segment

I'm learning semantic ui. But I always confuse about container and segment. I don't know when use container or segment,Those look not different beside margin. Someone explain it to me. Thank you.

Upvotes: 3

Views: 4888

Answers (1)

Sarthak
Sarthak

Reputation: 1052

Container and segment are different in the way they look as well as the way they function.

Look:

  • A segment has the properties of box-shadow, border-radius and border (read: special formatting) that make it look elevated.
  • A container looks simpler.
  • Note: A basic segment does not have this special formatting.

Behavior:

A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.

  • There is a maximum width associated with a container depending on the user size, but a segment does not have this restriction. A segment will take the full width of the space available.

  • Note: However you can override this in site.variables:

Adjusting site breakpoints in site.variables to use custom values will automatically adjust container widths.

Upvotes: 10

Related Questions