semantic ui - tutors · semantic's default theme uses 16 columns. the example below shows four...
TRANSCRIPT
![Page 1: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/1.jpg)
Semantic UI
Grids & Images
![Page 2: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/2.jpg)
Grids
![Page 3: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/3.jpg)
![Page 4: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/4.jpg)
![Page 5: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/5.jpg)
![Page 6: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/6.jpg)
![Page 7: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/7.jpg)
Grids in IoT Site
• How to adapt this to render as shown below?
![Page 8: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/8.jpg)
Two Columns
![Page 9: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/9.jpg)
combining grid with segment
+ introducing 2 “ui column” divisions
![Page 10: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/10.jpg)
Centre Alignment + ui image
![Page 11: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/11.jpg)
Middle Alignment
![Page 12: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/12.jpg)
![Page 13: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/13.jpg)
ui image
![Page 14: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/14.jpg)
![Page 15: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/15.jpg)
Image Variations
![Page 16: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/16.jpg)
Grids & Image Example - Before
![Page 17: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/17.jpg)
Grids & Image Example - After
• Grid - center aligned
• Two Rows
• Row 1 - single column
• Row 2 - 3 columns
![Page 18: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/18.jpg)
Grids & Image Example - After
![Page 19: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/19.jpg)
Text Grid Example
![Page 20: Semantic UI - Tutors · Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = various sized columns in the second](https://reader034.vdocument.in/reader034/viewer/2022042710/5f5fc90885cb8e33d375df18/html5/thumbnails/20.jpg)
• Two Rows
• Row 1 - three columns
• Row 2 - three columns