How to get field widths when using getFieldLayout()?

Question

I'm trying to show all my Channel's fields on front end, as they are shown on the CP:

{% set section = craft.app.sections.getSectionByHandle('handle') %}
{% set fieldLayout = section.getEntryTypes[0].getFieldLayout() %}

{% for field in fieldLayout.getFields() %}
    {# {{ field }} #}
{% endfor %}

How can I get the fields widths as they are shown in the CP?

As seen in the fieldlayouttabs table > elements > width value.

Answer 1

If you only need your custom fields, you can could use craft.app.fields.getLayoutTabsById() to grab the relevant tabs then do something like:

{% set section = craft.app.sections.getSectionByHandle('handle') %}
{% set fieldLayoutId = section.getEntryTypes[0].getFieldLayout().id %}
{% set fieldLayoutTabs = craft.app.fields.getLayoutTabsById(fieldLayoutId) %}

{% for tab in fieldLayoutTabs %}
    {% for field in tab.elements %}
        {% if field is instance of("craft\\fieldlayoutelements\\CustomField") %}
            <pre>{{ field.field.handle }} - {{ field.width }}</pre>
        {% endif %}
    {% endfor %}
{% endfor %}

field is instance of("craft\\fieldlayoutelements\\CustomField") will element filter attributes (title, dates...) out.