Title: Tip for Variable Columns Using Column Blocks
Last modified: December 13, 2018

---

# Tip for Variable Columns Using Column Blocks

 *  [JS](https://wordpress.org/support/users/jsylvia90/)
 * (@jsylvia90)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/tip-for-variable-columns/)
 * For those developers with CSS skills here is a sample of how to set the Gutenberg
   Columm Block to variable widths. In this sample it is two quarter columns and
   1 half column, but this should give you an idea:
 * DESKTOP PC
    ————— /* Set the first column */
 * .has-3-columns div:first-child {
    max-width: 20%; margin-right: 4%; margin-left:
   0; }
 * /* Set the second column */
 * .has-3-columns div:nth-child(2) {
    max-width: 20%; margin-right: 4%; margin-left:
   0; }
 * /* Set the third column */
 * .has-3-columns div:last-child {
    max-width: 50%; margin-left: 0; }
 * /* Now I did have a form plugin that was setting div tags within the parent column
   div and taking on its properties so for this I added the CSS below */
 * .has-3-columns div:first-child div, .has-3-columns div:nth-child(2) div, .has-
   3-columns div:last-child div {
    max-width: 100%; margin-right: 0; }
 * —————
 * /* For mobile responsive I used the css below with a media query. */
 * .has-3-columns div:first-child {
    max-width: 100%; margin-right: 0; margin-left:
   0; }
 * .has-3-columns div:nth-child(2) {
    max-width: 100%; margin-right: 0; margin-left:
   0; }
 * .has-3-columns div:last-child {
    max-width: 100%; margin-left: 0; }
 * —————
 * It is working great. You would think if I could figure this out in less than 
   an hour the Gutenberg folks come up with a solution for non-coders somehow.
 * I hope this helps at least one developer.
 * HAPPY HOLIDAYS!
    -  This topic was modified 7 years, 5 months ago by [JS](https://wordpress.org/support/users/jsylvia90/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Birgit Pauli-Haack](https://wordpress.org/support/users/bph/)
 * (@bph)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/tip-for-variable-columns/#post-10995436)
 * That’s a great tip! Thank you for sharing!! Definitely gives Theme developers
   a head start on the customization and styling of the default Columns Block in
   Gutenberg. 💕
 *  Thread Starter [JS](https://wordpress.org/support/users/jsylvia90/)
 * (@jsylvia90)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/tip-for-variable-columns/#post-11000125)
 * Glad to help.
 *  [itachik](https://wordpress.org/support/users/itachik/)
 * (@itachik)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/tip-for-variable-columns/#post-11138570)
 * It helped for mee too.
    Thanks you.
    -  This reply was modified 7 years, 4 months ago by [itachik](https://wordpress.org/support/users/itachik/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Tip for Variable Columns Using Column Blocks’ is closed to new replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [Column Blocks.](https://wordpress.org/support/topic-tag/column-blocks/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 3 replies
 * 3 participants
 * Last reply from: [itachik](https://wordpress.org/support/users/itachik/)
 * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/tip-for-variable-columns/#post-11138570)
 * Status: not a support question