CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples by Aravind Shenoy & Anirudh Prabhu

Author:Aravind Shenoy & Anirudh Prabhu [Shenoy, Aravind & Prabhu, Anirudh]
Language: eng
Format: epub
Tags: Web, Computers, Design, Web Development, Information Technology, Web Programming
ISBN: 9781484233993
Google: UJxQDwAAQBAJ
Publisher: Apress
Published: 2018-03-10T23:35:40.731929+00:00

As you can see, you can use uk-child-width-expand to evenly split all the items in the same row without going to the next row. Figure 4-8 shows the output of the code.

Figure 4-8Evenly sizing the inner elements

You can also define a custom width for some items in the code and use them in conjunction with the uk-child-width classes. Let’s look at the code in Listing 4-9 to see an example.

<div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>

<div>

<div class="uk-card uk-card-default uk-card-primary uk-card-body"> Spread</div>

</div>

<div class="uk-width-2-3">

<div class="uk-card uk-card-default uk-card-primary uk-card-body">Custom </div>

</div>

<div>

<div class="uk-card uk-card-default uk-card-primary uk-card-body">Spread</div>

</div>

<div>

<div class="uk-card uk-card-default uk-card-primary uk-card-body">Spread</div>

</div>

</div>

Listing 4-9Defining Custom Width for Inner Element

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.